WebStorm ES6 语法支持设置&babel使用及自动编译(详解)


Posted in Javascript onSeptember 08, 2017

一、语法支持设置

Preferences > Languages & Frameworks > JavaScript

WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

二、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代码一致。

还需要配置转码规则,继续往下看。↓↓↓

WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

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。

WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

五、使用命令,手动编译代码

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使用及自动编译(详解)

以上这篇WebStorm ES6 语法支持设置&babel使用及自动编译(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 #Javascript
javascript获取指定区间范围随机数的方法
Sep 08 #Javascript
原生js实现简单的模态框示例
Sep 08 #Javascript
javascript 面向对象实战思想分享
Sep 07 #Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 #Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 #Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 #Javascript
You might like
B2K与车机的中波PK
2021/03/02 无线电
PHP 处理图片的类实现代码
2009/10/23 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
javascript replace()正则替换实现代码
2010/02/26 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
python读取注册表中值的方法
2013/04/08 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
开会迟到检讨书
2014/02/03 职场文书
企业法人代表任命书
2014/06/06 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技