webstorm 搭建es6开发环境
本文转自:http://www.jianshu.com/p/26601581e152
1:新建一个Empty Project项目es6 ,然后在src目录下新建了一个es.js;
2:打开设置preferences,把JavaScript language version改成ECMAScript 6;
3:安装babel
1.首先在根目录新建一个package.json
{ "name": "es6", "version": "1.0.0"}
2.然后打开IDE的Terminal,安装babel-cli
npm install --save-dev babel-cli
安装完成后会在项目根目录下出现 node_modules文件夹
3.在preferences- tools- file watchers 下添加babel,下面第三行,Program那一项,填 项目目录下的node_modules/.bin/babel,比如我的就是
/Users/andy/学习/es6/node_modules/.bin/babel
然后点OK,这个时候你就会发现左边es.js下多出来一个es-compiled.js文件啦
4:但是还没搞定!现在只是搞定了自动转换的功能,系统默认把ES6 compile成了ES6..(你应该会发现compile出来的东西跟原来的一样..Generator函数并没有被转换成ES5的格式)
所以我们需要安装Babel的preset以正确识别ES6代码;
5:和刚才一样,在npm安装babel的ES6的preset
npm install --save-dev babel-preset-es2015
在根目录下新建一个.babelrc文件(就是babel在当前项目的配置文件),写上
{ "presets": [ "es2015" ]}
6.如下es6-1-compiled.js是编译后的es5文件
作者:烟雾袅绕
链接:http://www.jianshu.com/p/26601581e152
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
webstorm 搭建es6开发环境的更多相关文章
- 为何要搭建ES6开发环境,如何搭建ES6开发环境?
1.ES6需要搭建开发环境,原因是现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6语法的,这就需要我们把ES6的语法自动转变成ES5的语法. 2.开始搭建环境 ...
- 使用webstorm 搭建 vue 开发环境
一.首先安装 node.js 安装成功后在cmd里面使用:node -v 命令查看安装是否成功 下载链接: 链接:https://pan.baidu.com/s/1CL9J4Ryp3sL0zPYKJy ...
- 轻松搭建ES6开发环境
首先,你要自行查阅什么是ES6和ES5.javascript有什么关系,为什么要编译ES6.废话不多说,just go! 第一步:创建项目并让它成为npm可以管理的仓库. 新建一个项目,名字假设为te ...
- 搭建ES6开发环境
https://github.com/IOJINDD/ES6-dev 在gulpfile最后一行加上: gulp.task('default', ['compile-es6', 'pack-js', ...
- es6开发环境搭建,babel 将es6转化成es5
工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...
- 使用Visual Studio Code搭建TypeScript开发环境
使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...
- Win7搭建NodeJs开发环境以及HelloWorld展示—图解
Windows 7系统下搭建NodeJs开发环境(NodeJs+WebStrom)以及Hello World!展示,大体思路如下:第一步:安装NodeJs运行环境.第二步:安装WebStrom开发工具 ...
- Win7搭建NodeJs开发环境
Win7搭建NodeJs开发环境以及HelloWorld展示—图解 Windows 7系统下搭建NodeJs开发环境(NodeJs+WebStrom)以及Hello World!展示,大体思路如下:第 ...
- 搭建ES6运行环境
当ES5还没有完全普及时,ES6就接踵而来了,2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015,我们也简称它为ES6或ES2015.在发布之后的将近一年内, ...
随机推荐
- [转]C# NPOI 导入与导出Excel文档 兼容xlsx, xls
本文转自:https://www.cnblogs.com/lazyneal/p/6148912.html 参考:http://www.cnblogs.com/restran/p/3889479.htm ...
- 【手记】解决Resharper 2018.x起本机license server不能用的问题
ReSharper升级到2018版后,一直用的好好的本机license server(下称LS)不能用了,报The license server address is incorrect....在网上 ...
- C#图片处理类
转载來源:简书 转载作者:幻凌风 转载来源:https://www.jianshu.com/p/e1bab83e87ce using System; using System.Collections; ...
- Debug模式下,测试app后缀名“-测试”
target-->buildsetting-->user-defined 新建一个和上图尖括号一样的字符 如下图: 在debug中填入后缀名,然后在debug模式下运行程序,会发现debu ...
- Java - “JUC”锁
[Java并发编程实战]-----“J.U.C”:锁,lock 在java中有两种方法实现锁机制,一种是在前一篇博客中([java7并发编程实战]-----线程同步机制:synchronized) ...
- Java对MySQL数据库进行连接、查询和修改(转)
Java对MySQL数据库进行连接.查询和修改 0. 一般过程: (1) 调用Class.forName()方法加载驱动程序. (2) 调用DriverManager对象的getConnection( ...
- Linux常用基本命令(more)
more命令 作用:相比cat一次性显示文件内容,more用于分页显示内容,less比more更强大,大多数的参数类似 more [option] [file] -num : 每页显示num行 +nu ...
- 【奇技淫巧】绕过waf写文件
今天偶然利用此命令干成了大事,老司机一看就懂命令用法百度搜到的,希望对各位表哥有用echo 48 65 6C 6C 6F 2C 57 6F 72 6C 64 21 >hex.txt::生成 he ...
- Codeforces834A
A. The Useless Toy time limit per test:1 second memory limit per test:256 megabytes input:standard i ...
- HDU1114(KB12-F DP)
Piggy-Bank Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...