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 相关文章推荐
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
Postman的下载及安装教程详解
Oct 16 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
Nest.js散列与加密实例详解
Feb 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
神族 Protoss 历史背景
2020/03/14 星际争霸
PHP新手上路(五)
2006/10/09 PHP
给php新手谈谈我的学习心得
2007/02/25 PHP
php调整服务器时间的方法
2015/04/03 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
php fread函数使用方法总结
2019/05/28 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
继续学习javascript闭包
2015/12/03 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
Python应用库大全总结
2018/05/30 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
详解Python IO编程
2020/07/24 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
安全生产管理合理化建议书
2014/03/12 职场文书
医学求职信
2014/05/28 职场文书
环保公益策划方案
2014/08/15 职场文书
绿色校园广播稿
2014/10/13 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
图文详解nginx日志切割的实现
2022/01/18 Servers
Go 内联优化让程序员爱不释手
2022/06/21 Golang