利用babel自动编译es6文件
一、检查File-Watchers中Babel的Arguments,有一项presets的设置,把他更改为=es2015,详细设置如下:
$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets=es2015
二、把JavaScript language version改成ECMAScript 6;
安装base后,增加base的watch
IDE会出现一个File watcher提示条
先别点Add watcher!我们要先去装babel~
首先在根目录新建一个package.json
{
"name": "test-project",
"version": "1.0.0"
}
打开IDE的Terminal,安装babel-cli
npm install --save-dev babel-cli
$ProjectFileDir$/node_modules/.bin/babel
然后点OK,这个时候你就会发现左边多出来一个main-compiled.js文件啦
但是还没搞定!现在只是搞定了自动转换的功能,系统默认把ES6 compile成了ES6..(你应该会发现compile出来的东西跟原来的一样..Generator函数并没有被转换成ES5的格式)
所以我们需要安装Babel的preset以正确识别ES6代码;
和刚才一样,在npm安装babel的ES6的preset
npm install --save-dev babel-preset-es2015
在根目录下新建一个.babelrc文件(就是babel在当前项目的配置文件),写上
{
"presets": [
"es2015"
]
}
保存再回去看一下main-compiled.js 应该就变成这个样子啦,现在你在main.js里直接写ES6代码,IDE都会自动compile成ES5的代码在这里啦~
注意:想直接用Node.js运行ES6代码还是有些问题..因为这段代码用的ES6的解构赋值Node.js还未完全支持,需要在运行的时候加入一些tags(以开启Node.js的相关试验特性),具体可以参考Node.js官网对ES6的说明:ECMAScript 2015 (ES6)
原文地址:https://www.zhihu.com/question/43414079
利用babel自动编译es6文件的更多相关文章
- linux(以ubuntu为例)下Android利用ant自动编译、修改配置文件、批量多渠道,打包生成apk文件
原创,转载请注明:http://www.cnblogs.com/ycxyyzw/p/4555328.html 之前写过一篇<windows下Android利用ant自动编译.修改配置文件.批量 ...
- Eclipse不自动编译java文件的终极解决方案
最近我的eclipse经常犯傻,项目中总是有很多,启动项目也是没有启动类.查了下项目中生成的class文件,我靠竟然没有,或者还是以前的.原来是eclipse犯傻了,它没帮我自动编译java文件.一般 ...
- Eclipse不能自动编译 java文件的解决方案
前段时间出现了eclipse 不自动编译java文件的问题,在网上找了好长时间,总算把问题解决了,现在把这个问题的解决方法总结一下. 1,看看project -- Build Automaticall ...
- windows下Android利用ant自动编译、修改配置文件、批量多渠道,打包生成apk文件
原创文章,转载请注明:http://www.cnblogs.com/ycxyyzw/p/4535459.html android 程序打包成apk,如果在是命令行方式,一般都要经过如下步骤: 1.用a ...
- Hbuilder中添加Babel自动编译
Hbuilder是一个不错的H5开发IDE. Babel是EMCAScript最新标准的编译器,很多ES的最新特性都可以在Babel中尝试. 如果可以有办法在Hbuilder中直接使用ES6,并通过B ...
- Eclipse不能自动编译 java文件
在网上的解决方法 方法参考如下: (1) Window-->Preferences-->General-->Workspace 有个"Build automatica ...
- Eclipse不能自动编译 java文件,不会生成CLASS
每次修改类代码后都得重启 Tomcat 花了1天终于解决,网上所说基本是下面1和2的方法,使用之后还是不行最后重新建工作环境导入项目对比了一下找到第三种方法 1.Project 下有个 "B ...
- Tomcat不能自动编译JSP文件问题的一种解决方法
今天碰到一个非常奇怪的问题,机器环境是JDK8.Tomcat8,把jQuery MiniUI ( for Java Eclipse)下载后导入到Eclipse中,首页可以显示,但运行操作数据库的页面出 ...
- 利用babel工具将es6语法转换成es5,Object.assign方法报错
一.新建工程初始化项目 1.新建工程文件夹这里起名叫做es6,然后在里面创建两个文件夹分别为src .dist如下图:(src为待转换es6 js存放目录,dist为编译完成后的es5 js存放目录) ...
随机推荐
- linux 运维基础测验题
第一题:创建一个目录/data --> mkdir /data eg: ls -d 显示命令 -l 详细信息 -a 显示所有文件 cd 打开目录 pwd 显示当前目录 第二题:在/ ...
- 单元测试框架AndroidTestCase
我不是讲怎么成为一个安卓测试员,就不写那么多了 就写我们常用的, AndroidTestCase 为一Android平台下通用的测试类,它支持所有JUnit的Assert方法和标准的setUp 和te ...
- pat03-树3. Tree Traversals Again (25)
03-树3. Tree Traversals Again (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue ...
- Windows x64位通过PEB获得Kernel32基地址
在64位系统下 gs:[0x30] 指向TEB gs:[0x60] 指向PEB kd> dt _TEB nt!_TEB +0x000 NtTib : _NT_TIB +0x000 Excepti ...
- vscode设置语言
按 ctrl+shift+p 中文设置成英文输入 “配置语言” 打开locale.json 设置 "locale":"en" 英文设置成中文输入 &qu ...
- Java Socket, DatagramSocket, ServerSocketChannel io代码跟踪
Java Socket, DatagramSocket, ServerSocketChannel这三个分别对应了,TCP, udp, NIO通信API封装.JDK封装了,想跟下代码,看下具体最后是怎么 ...
- Mysql5.7的安装配置问题
前些日子安装和配置mysql,遇到一些问题,在这里记录一下. 1.首先,把zip的mysql解压. 2.设置环境变量PATH中添加你的mysql解压目录. 3.在mysql根目录下新建my.ini文件 ...
- jquery hover(overListener, outListener) || bind('mouseover',methodA).bind('mouseout',methodB)
1.区别: bind方式,进入外部区域和内部区域都会触发相关方法(methodA 或methodB): hover方式,进入内部区域不会再触发相关方法. 2.example: <body> ...
- 【代码笔记】Java学习一阶段总结
写笔记需要打开eclipse写 哈哈哈哈,不然写什么都屡不清了 ……还需要打开API说明文档. JFrame 窗体组件. JFrame里面常用的函数: setSize 设置窗体大小 setDefaul ...
- C#程序的编译和执行
1.在讲解 C# 程序的编译与执行之前,首先了解以下两个概念,以便充分理解C# 程序的运行. CLI--Common Language Infrastructure 的简称,C# 程序在Microso ...