webstrom 配置 es6 的运行环境
来源:互联网 发布:常见网络诈骗手段有 编辑:程序博客网 时间:2024/06/11 10:04
Win7 下 WebStrom 配置 es6 的运行环境,WebStrom 的版本是 11.0.3,其他的版本,可能略有所不同。
1. node.js 安装
首先 WebStrom 需要安装 node.js,以支持 npm 指令。
安装node.js程序,按照提示一步步安装即可,注意在安装时,勾选自动添加到 系统环境 中的选项。
Node.js安装完成后,检查环境变量path中是否配置了Node.js;在命令行中输入”path”,结果如下:
检查Node.js是否安装成功,也可直接在命令行中输入“node -v”,进行测试,结果中显示当前安装的 node.js 的版本,说明安装正确了。
开始在WebStorm中配置node.js。File->settings 输入node.js,配置Node interpreter;
2. ES6 语法支持设置
File > Settings > Languages & Frameworks > JavaScript
3. 自动转码为ES5
file watcher + babel-cli(ES6转码器)
你可能希望你写的代码有更好的兼容性,但目前的ES6肯定不是所有浏览器都支持的,所以我们要用到ES6转码器。
Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境执行。这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持。
而且你还希望每次修改代码时能自动转码,所以还要用到webstorm的file watcher(当然还有其他解决方案)
首先需要在你准备安装 babel 的根目录下(或是当前项目下)手动新建一个 package.json 文件,内容如下:
{ "name": "yourProjectName", "version": "1.0.0"}
打开IDE的Terminal
View > Tool Windows > Terminal
在打开的 Terminal 窗口中输入以下命令,开始安装babel-cli
npm install –save-dev babel-cli //*注意save前面是两个[-]
这个时候若是老是卡在如下提示:
[ …………..] - fetchMetadata: sill mapToRegistry uri https://registry.n
请先修改 registry 再试试:
首先在 CMD 窗口中输入如下代码:
npm config get registry
先查看当前的 registry 是否是:
https://registry.npmjs.org/
如果是的话,使用如下命令修改:
npm config set registry https://registry.npm.taobao.org
完成后再次使用如下命令,查看是否修改成功:
npm config get registry
添加 file watcher
File > Settings > Tools > File Watchers
点击右边的 +
号添加 babel,如下:
然后在打开的配置界面中,其他配置项可以不做修改,只需要修改 Program
这一栏,找到你安装的 babel-cli 的安装目录下的 安装目录\node_modules\.bin\babel.cmd
,安装目录一般在你 Webstrom 的工程目录同级。
然后点击 OK
就可以了,这个时候你就会发现左边文件目录中多出来一个 *-compiled.js 和 *-compiles.js.map 文件.
还差一步操作,现在只是搞定了自动转换的功能,系统默认把ES6 compile成了ES6..(你应该会发现 compile 出来的东西跟原来的一样. *-compiled.js
文件中的内容并没有被转换成ES5的格式),所以我们需要安装Babel的preset以正确识别ES6代码。
安装 babel 的 ES6 preset
在 WebStrom 的 Terminal 窗口中输入如下命令:
npm install –save-dev babel-preset-es2015 //*注意save前面是两个[-]
如果是 WebStrom 2017 后面的版本,不能安装 es2015,这个已经被 env 所代替了,需要安装使用如下 preset:
npm install –save-dev babel-preset-env //*注意save前面是两个[-]
手动添加 babel 的配置文件
(这个配置也可以不用,默认就是的)在根目录下新建一个.babelrc文件(就是babel在当前项目的配置文件),写上
{ "presets": [ //"es2015" --如果是 WebStrom 2017 后面的版本,这里不能再使用 es2015 了,需要使用最新的 env "env" ]}
现在全部 OK 了,在 WebStrom 中正确书写 ES6 的代码,会自动编辑成 ES5 的 -compiled.js 文件。
注意 package.json 里面的内容应该如下:
{ "name": "test-project", "version": "1.0.0", "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-env": "^1.6.0" }}
3. 示例:
//ES6 中的代码:let a = `日期${new Date()}`;console.log(a);//动态创建表格const tmpl = addrs => ` <table> ${addrs.map(addr => ` <tr><td>${addr.first}</td></tr> <tr><td>${addr.last}</td></tr> `).join('')} </table>`;const data = [ { first: '<Jane>', last: 'Bond' }, { first: 'Lars', last: '<Croft>' }];
转换成的 -compiled.js 文件中的代码:
//自动转换成的 ES5 的代码var a = "\u65E5\u671F" + new Date();console.log(a);//动态创建表格var tmpl = function tmpl(addrs) { return "\n <table>\n " + addrs.map(function (addr) { return "\n <tr><td>" + addr.first + "</td></tr>\n <tr><td>" + addr.last + "</td></tr>\n "; }).join('') + "\n </table>\n";};var data = [{ first: '<Jane>', last: 'Bond' }, { first: 'Lars', last: '<Croft>' }];console.log(tmpl(data));
4. 注意:
配置好 babel 的 file Watcher 后,文件只要一有修改,就会触发这个自动转换。如此以来,整个 WebStrom 就会很卡,一直在编译。
为了解决这个问题,我们可以关闭 WebStrom 的自动保存功能,并且关闭 file watcher 的文件改变时就触发的自动监听,让文件在保存是触发这个转换事件。
关闭 WebStrom 的自动保存功能
首先,关闭自动保存:
File > Settings >Appearance & Behavior > System Settings
然后,打开没有保存文件的提示图标:
File > Settings > Editor > General > Editor Tabs
关闭 Babel File Watcher 的自动监听
点击 OK 就可以了,现在需要使用 Ctrl + S 手动保存后,才会进行转换。
- webstrom 配置 es6 的运行环境
- webstrom+nginx环境配置
- webstrom 配置coffeescript开发环境
- Node.js+webStrom 环境配置
- webstrom配置scss编译环境
- 搭建ES6运行环境
- ES6运行环境
- webstrom支持es6语法
- 配置es6编辑环境遇到的问题。
- ES6开发环境配置
- webstrom配置
- webstrom 配置
- 基于vscode的node的ES2015(ES6)运行环境搭建
- cocos2d-js + webstrom 的安装与配置
- ubantu 下 es6 环境配置
- webpack+react+es6环境配置
- php运行环境的配置
- jsp运行环境的配置
- Service Cloud関連
- css样式基础
- ListView多条目+ImageLoader
- 厦门亿联2018面试题
- BZOJ 1800 AHOI 2009 fly 飞行棋
- webstrom 配置 es6 的运行环境
- jqGrid禁止某条记录被选中
- 密码编码学初探——分组加密技术(DES&AES)
- java源文件当中可以有多个类,但是为什么只能有一个public类呢?而当这个类被修饰为public的话,为什么源文件名必须要与类名相同呢?
- Android中Application类用法
- android Drawable总结
- 前端之--前端性能优化
- 浅谈C++多态性
- React 入门,5个常用DEMO展示