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中对对层的控制
Dec 29 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
仿照Element-ui实现一个简易的$message方法
Sep 14 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
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
jquery 新浪网易的评论块制作
2010/07/01 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
介绍一下#error预处理
2015/09/25 面试题
汇科协同Java笔试题
2012/03/31 面试题
《蒲公英》教学反思
2014/02/28 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书