这次给大家带来WebStorm ES6怎么使用babel，WebStorm ES6使用babel的注意事项有哪些，下面就是实战案例，一起来看一下。
一、语法支持设置
Preferences > Languages & Frameworks > 注意事项
二、Babel注意事项
1、全局安装
npm install -g babel-cli
登录后复制
2、当前项目，适用于使用不同babel版本的情况
npm install --save-dev babel-cli
登录后复制
三、Babel基本用法
# 转码结果输出到标准输出 babel example.js# 转码结果写入一个文件# --out-file 或 -o 参数指定输出文件 babel example.js --out-file compiled.js# 或者 babel example.js -o compiled.js# 整个目录转码# --out-dir 或 -d 参数指定输出目录 babel src --out-dir lib# 或者 babel src -d lib# -s 参数生成source map文件 babel src -d lib -s
登录后复制
四、webstorm中使用babel
0、新建一个test.js文件，用作测试用例
input.map(item => item + 1);
登录后复制
1、项目中需要增加一个文件： package.json
{ "name": "application-name", "version": "0.0.1"}
登录后复制
2、当前项目中，安装babel
npm install --save-dev babel-cli
登录后复制
3、使用WebStorm自带的File Watcher功能
Preferences > Tools > File Watchers ，点击右侧的+号，选择babel，直接点击OK即可。
操作完成后，这时候修改JS代码，就会发现同步生成了一个test-compiled.js 文件，打开后发现代码和test.js代码一致。
还需要配置转码规则，继续往下看。↓↓↓
4、添加注意事项 .babelrc
Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。
该文件用来设置转码规则和插件，基本格式如下。
{ "presets": [], "plugins": []}
登录后复制
5、设置转码规则
presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。
# ES2015转码规则npm install --save-dev babel-preset-es2015# react转码规则npm install --save-dev babel-preset-react# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个npm install --save-dev babel-preset-stage-0npm install --save-dev babel-preset-stage-1npm install --save-dev babel-preset-stage-2npm install --save-dev babel-preset-stage-3
登录后复制
咱们需要安装es2015，命令如下：
npm install –save-dev babel-preset-es2015
6、注意事项配置文件 .babelrc
将相应的规则，保存至配置文件中。
{ "presets": [ "es2015" ], "plugins": []}
登录后复制
7、完成，查看效果
以上步骤操作完成后，即可实现修改代码后，自动将ES6代码转换为ES5。
五、使用命令，手动编译代码
1、更改package.json文件
{ "name": "application-name", "version": "0.0.1", "devDependencies": { "babel-cli": "^6.26.0" }, "scripts": { "build": "babel src -d lib" }}
登录后复制
2、使用命令，生成ES5代码
npm run build
登录后复制
3、效果
会将src目录下的代码，编译到lib目录下。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
注意事项
注意事项
以上就是WebStorm ES6怎么使用babel的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2770958.html
