WebStorm ES6 语法支持设置&babel使用及自动编译(详解)
一、语法支持设置
Preferences > Languages & Frameworks > JavaScript
二、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-0 npm install --save-dev babel-preset-stage-1 npm install --save-dev babel-preset-stage-2 npm 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使用及自动编译(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于JavaScript中事件与异常捕获的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-02-02
this,this,再次讨论javascript中的this,超全面(经典)
在JavaScript中，this 的概念比较复杂。除了在面向对象编程中，this 还是随处可用的。这篇文章介绍了javascript中的this相关知识，对javascript this相关知识感兴趣的朋友一起学习吧2016-01-01
这篇文章主要介绍了threejs 模型添加文字的几种方式,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了微信小程序实现自定义拍摄组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要为大家详细介绍了js中flexible.js实现淘宝弹性布局方案，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要介绍了JS三级可折叠菜单实现方法,以实例形式分析了asp.net结合JavaScript实现三级折叠菜单的相关技巧,涉及JavaScript节点操作实现方法,需要的朋友可以参考下2016-02-02
在前端开发过程中,通过使用JS的正则表达式来校验输入的邮箱或者手机号是否正确,这也是一个非常常见的业务情景需求,下面这篇文章主要给大家介绍了关于利用JS正则表达式验证邮箱和手机号的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了微信小程序实现拍照打卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
在 JavaScript 中，对象是引用类型的数据，其优点在于频繁的修改对象时都是在原对象的基础上修改，并不需要重新创建，这样可以有效的利用内存，不会造成内存空间的浪费，对象的这种特性可以称之为 Mutable，中文的字面意思是「可变」2016-05-05
forms 返回一个集合包含了了当前文档中的所有form元素，下面通过示例为大家介绍下document.forms用法,需要的朋友可以参考下2014-06-06
最新评论