Babel和 WebStorm 自动转码配置

版权声明：该博客为博主原创,转载请标明出处! https://blog.csdn.net/DJH2717/article/details/85757013

教程:ES6标准入门

第一步

在工程的目录下新建 .babelrc 文件, 用命令行 echo>.babelrc 创建.

第二步

在工程目录下新建package.json 文件, 并对其进行json格式初始化, 输入{} 即可

第三步

# 最新转码规则
$ npm install --save-dev babel-preset-latest

# 不同阶段语法提案的转码规则（共有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

局部(save-dev) 安装相应的转码规则, 按照教程的命令输入, 转码规则安装时要 cd 到工程的目录下. 然后在 .babelrc 配置好已经安装的转码规则, 如下:

{
  "presets": [
    "latest",
    "stage-2"
  ],
  "plugins": []
}

第四步

npm install --global babel-cli

全局(global) 安装 babel-cli, 用于命令行转码。常用转码命令:

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js -o compiled.js 

WebStorm自动转码配置

第一步

cd 到项目根目录, 安装:

npm install babel-preset-env

第二步

打开 WebStorm 的FileWatcher, 添加全局安装的 babel.cmd, 目录在 user/1544/APPData/npm/… 下, 注意: 要把 argument 最后改成 env, 如图:

到此配置完成…