babel是什么鬼
Babel is a JavaScript compiler
babel主要的职责就是将一些前沿时髦的JS特性通过"翻译"用到老旧的‘宿主’环境里。(浏览器，Node等)
babel的正确打开方式
babel-cli
利用babel命令行工具来进行对应的文件进行"翻译"。
npm install --save-dev babel-cli 复制代码
可以在CLI中直接将指定的文件进行编译。
babel script.js 复制代码
.babelrc
.babelrc又是什么东东
如果一个项目中需要用到babel打包工具，此时.babelrc就是存放在项目根目录下的babel的配置文件。 这种方式用于前端项目自己维护webpack/webpackDevServer。(这个文件是为前端服务器使用的)
e.g.
webpack配置文件中获取babel的配置信息。（下面的配置文件有省略）
// 引入babel文件，对react项目进行运行时监测 var babelrc = fs.readFileSync('./.babelrc'); module.exports = { devtool：{}, context:{}, entry:{}, output:{}, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelrc),]}] } 复制代码
package.json
在对应的项目的package.json的babel中指定对应的babel配置信息。
"babel": { "presets": [ "react-app" ] }, 复制代码
配置规格和.babelrc是一样的
常用参数
env
使用env来对指定的环境配置转码规格。
{ "env": { "development": { "plugins": [ "typecheck", ["react-transform", { "transforms": [{ "transform": "react-transform-catch-errors", "imports": ["react", "redbox-react"] } ] }] ] }， "production": { "plugins": ["transform-react-constant-elements"] } } } 复制代码
该参数一般都是指定类似于catch-errors这类的plugins。
变量的使用
该变量会被WebpackDevServer的配置文件获取，从而根据production或者development来定义WebpackDevServer的行为。
presets
presets用来定义转码规则。
"presets": ["react", "es2015", "stage-0"] 复制代码
或者按照官方的推荐的一种一劳永逸的方法
npm install babel-preset-env --save-dev //.babelrc中配置 { "presets": ["env"] } 复制代码
Without any configuration options, babel-preset-env behaves exactly the same as babel-preset-latest (or babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017 together).
有时候需要根据宿主环境的不同，来决定是否采用转码。所以需要额外的指定target
{ "presets": [ ["env", { "targets": { "browsers": ["last 2 versions", "safari >= 7"] //这里也可以指定Node的信息 //"node": "6.10" } }] ] } 复制代码
plugins
来配置一些插件用于babel的transform阶段来使用。 所以在plugins中常见得plugins都是带transform前缀的。
"plugins": [ "transform-runtime", "transform-class-properties", "syntax-object-rest-spread" ] 复制代码
这里需要额外的提示一下transform-runtime。在定义公共库的时候，很有用。
babel的底层知识
Babel在转码的过程中也会存在"生命周期"。parsing/transforming/generation。 或者说编译器都存在这个三个周期。 如何实现一个编译器了解一下
