题外话：写笔记，保存好，以温故。
安装依赖
npm install --save-dev babel-cli babel-preset-env
配置查找
| 步骤 | 内容 |
|---|---|
| 01 | 在当前目录查找.babelrc文件
|
| 02 | 遍历目录树查找 |
| 03 | 在package.json文件中查找"babel":{}
|
//关闭："babelrc": false 或 --no-babelrc
//参考文献：http://babeljs.io/docs/usage/babelrc/
指定环境
| 环境 | 配置 |
|---|---|
| 开发 | env |
| 测试 | env |
| 产品 | env |
语法转换
| 语法 | 配置 |
|---|---|
| es2015 | "presets": ["es2015"] |
| react | "presets": ["react"] |
Plugin、Preset、Stage-X的关系
| 语法 | 插件 |
|---|---|
| es2015 | npm install --save-dev babel-preset-es2015 |
| react | npm install --save-dev babel-preset-react |
运行环境
需要支持的环境，以及需要兼容的浏览器清单。
| 环境 | 配置 |
|---|---|
| chrome | |
| edge | |
| firefox | |
| safari | |
| ie | |
| ios | |
| node |
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"],
"node": "current"
}
}]
]
}
接口转换
添加全局对象Promise等。
| 语法 | 配置 |
|---|---|
| es2015 | "plugins": ["transform-runtime"] |
babel-polyfill 、babel-runtime和transform-runtime的选择
http://babeljs.io/docs/plugins/transform-runtime/
模块转换
| 类型 | 配置 |
|---|---|
| amd | "presets": [{"modules": "AMD"}] |
| cmd | "presets": [{"modules": "CommonJS"}] |
| umd | "presets": [{"modules": "UMD"}] |
若使用webpack v2.* - v3.*，则
"presets": {"modules": "false"}。因为webpack已经转换了。
除掉注释
| 类型 | 配置 |
|---|---|
| 注释 | "comments": false, |
于命令行
//转码结果输到标准输出？
babel example.js
//转码结果写入一个文件
babel example.js --out-file compiled.js
//整个目录转码并且输出
babel src --out-dir lib
//转码之后生成资源映射
babel src -d lib -s
查找顺序
plugins优先于presets进行编译；
plugins按照数组的index增序(从数组第一个到最后一个)进行编译；
presets按照数组的index倒序(从数组最后一个到第一个)进行编译。
