ES6-Babel配置

配置文件

.babelrc

使用Bable的第一步,在项目根目录下新建并配置文件 .babelrc window 环境下,命名 .babelrc. 生成配置文件 该文件来设置转码规则和插件,基本格式如下

1
2
3
4
{
"preset":[],
"plugins":[]
}

preset 字段设定转码规则,可以根据需要安装

1
2
3
4
5
6
7
8
9
10
11
# 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

将这些规则加入 .babelrc

1
2
3
4
5
6
7
8
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}

以下所有Babel工具和模块的使用,都必须先写好 .babelrc

全局安装

1
$ npm install --global babel-cli

基本用法如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 转码结果输出到标准输出
$ 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

项目安装

1
$ npm install --save-dev babel-cli

配置 package.json ,将 src文件夹 编译到 js 文件夹

1
2
3
4
5
6
7
8
9
{
// ...
"devDependencies": {
"babel-cli": "^6.24.0"
},
"scripts": {
"build": "babel src -d js"
},
}

转码执行命令

1
$ npm run build

babel-bode

改写 package.json

1
2
3
4
5
{
"scripts": {
"script-name": "babel-node script.js"
}
}

上面代码中,使用 babel-node 替代 node ,这样 script.js 本身就不用做任何转码处理。

  • 版权声明: 本博客所有文章,未经许可,任何单位及个人不得做营利性使用!转载请标明出处!如有侵权请联系作者。
  • Copyrights © 2015-2023 翟天野

请我喝杯咖啡吧~