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遍历、动态的添加数据的小例子
Jun 22 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
Python实现简易Web爬虫详解
2018/01/03 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
英国网上花店:Bunches
2016/11/29 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
生产部统计员岗位职责
2014/01/05 职场文书
运动会邀请函范文
2014/02/06 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
宣传工作经验材料
2014/06/02 职场文书
服务理念口号
2014/06/11 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android