欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-28 23:48:37
一、语法支持设置 preferences > languages & frameworks > javascript 二、babel安装 1、全局...

一、语法支持设置

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使用及自动编译(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。