- node对es6兼容程度不断提高,书写也不会受到限制
- 注意:低版本的node对es6支持不是很好,测试的话会出现很多问题,建议升级node版本,windows的用户估计要到网站下载安装才能升级
- 附网址:https://nodejs.org/en/download/
- 目前我用的是6.112
- 以下的所有node命令建议使用cmd命令执行,webstorm下边的Terminal执行的时候有时候出现问题,等找到解决办法后再更新
- 新建一个空的项目testEs6
- 常用的node命令
-
npm init 创建package.json文件 npm install <module-name> -g/--save-dev/--save 安装模块 npm update <module-name > 更新模块 npm uninstall <module-name > 卸载模块 - 安装babel-cli
-
npm install babel-cli -g
安装后就在命令行中使用 babel 命令
把依赖写入 package.json
npm install babel-cli --save-dev
转换命令:babel app.js --out-file build.js
在项目中新建一个es6文件夹,包含一个index.js文件
转换之前先将js文件的编码格式设置为es6
- 设置完之后使用命令babel ./es6/index.js --out-file ./es6/a.js
- 可以看到在es6的文件家中新增一个a.js文件,但是没有转换
- 想要转换的话需要使用es2015
-
npm install --save-dev babel-preset-es2015 在根目录下建一个.babelrc文件,设置为 {"presets": ["es2015"]}
-
babel ./es6/index.js --out-file a.js - 转换成功的a.js
- 自动转化设置
- 点击这个Add watcher
- 或者在file>settings>Tools>File Watchers添加babel
- 我修改的
-
Arguments:
--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$
Qutput paths to refresh:
$FileNameWithoutExtension$-compiled.js:$FileNameWithoutExtension$-compiled.js.map
Working directory
$FileDir$
- 其中各个的设置的含义可以参考webstorm介绍:,下次再做介绍
- 附:https://www.jetbrains.com/help/webstorm/2016.2/new-watcher-dialog.html
- 这样的话只要修改es6下的index.js就会转义
webstorm编辑器使用babel自动转化es6
最新推荐文章于 2023-02-26 22:16:33 发布