babel是用来进行转码的,在不支持es6的环境下,需要将es6的语法转码成es5的语法格式,就用到了babel。
.babelrc 文件的配置
在项目的根目录下创建 .babelrc 文件
文件包括两部分:
{ "presets":[], "plugins":[] }
"presets"用来设定转码的规则;plugins是需要安装的插件
规则:
#安装最新的转码规则 $ npm install babel-preset-latest --save-dev #安装react的转码规则 $ npm install babel-preset-react --save-dev #不同阶段的语法提案的转码规则(4选1) $ 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 文件中
注意:该文件的编辑方式按照json文件的编辑习惯编辑。其中,不能使用 ' ' 代替 " " 。
{ "presets":[ "latest", "react", "stage-2" ], "plugins":[] }
命令行转码工具:babel-cli
一般的使用方法如下:
#安装命令行工具到全局 $ npm install -g babel-cli
#安装命令行工具到项目中
$ npm install --save-dev babel-cli
改写package.json文件,将启动 babel-cli 的命令进行封装
#封装命令,名称随意
"scripts": { ... "babelCli":"babel src -d lib" },
#安装好之后自动添加
"devDependencies": {
...
"babel-cli": "^6.26.0",
}
执行如下:
$ npm run babelCli
有关 babel-cli 的具体用法见阮老师的 ECMAScript6简介
babel-node:提供一个REPL环境
REPL 是交互式解析器 可以看这里 或自行百度 node的REPL。
简单的理解,就是提供可以在命令行进行一些运算。
babel-register:对文件自动转码
babel-register会对require引入的后缀为 ‘.js’, '.jsx' , '.es' , '.es6' 的文件进行转码。不需要再使用转码命令进行转码。
安装:
$ npm install --save-dev babel-register
引用:
require("babel-register");
require("./App.js");
注意:1.必须先引入babel-register 再引入文件。 2.引入的方式只能通过 require 的方式引入。3.只在生产环境生效
babel-polyfill:提供转换新API的插件
有一些新的API,babel不会进行转化 --> Iterator
、Generator
、Set
、Maps
、Proxy
、Reflect
、Symbol
、Promise
等全局对象,以及一些定义在全局对象上的方法(比如Object.assign
)都不会转码.安装了babel-polyfill之后就可以对这些新API进行转化。
#安装: $ npm install --save-dev babel-polyfill
#使用
import('babel-polyfill');
require('babel-polyfill');