平时开发中，经常需要用到ES6/ES7的语法。那么就需要用到Babel来对代码进行转码处理。
之前用Vue比较多，所以以Vue-cli作为参考来分析。
第一张图是几个月前的Vue-cli生成的
第二个图是今天使用Vue-cli生成的Babel-core
顾名思义，这是 babel 的核心代码，但是在我们构建的时候不会直接调用 babel-core 。它是一个标准库，通常服务于各种 polyfill 等库，比如 babel-runtime, babel-plugin-transform-runtime, babel-polyfill 等。
Babel-loader
通常在我们使用webpack的时候，我们会先安装 babel-loader来作为加载器。
babel-preset-env 稍后介绍
cnpm i babel-loader babel-core babel-preset-env -D
这样在webpack中，可以这样
module exprots = { entry: __dirname + '/main.js', output: { path: __dirname + '/public', filename: 'bundle.js' }, module: { rules: [ { test: /(\.jsx|\.js)$/, use: { loader: 'babel-loader', options: { presets: ['env'] } }, exclude: /node_module/ } ] } } Babel-preset-es2015
之前的都是介绍的 babel-core babel-loader 并不能转码，而当我们想使用ES6语法时候就需要用到 babel-preset-es2015
cnpm i babel-preset-es2015 -D
在使用webpack构建工具时，我们通常不会在webpack.config.js里直接对 babel 进行配置。而是在根目录下创建一个 .babelrc.js 的文件。
/* webpack.config.js */module exprots = { entry: __dirname + '/main.js', output: { path: __dirname + '/public', filename: 'bundle.js' }, module: { rules: [ { test: /(\.jsx|\.js)$/, use: { loader: 'babel-loader' }, exclude: /node_module/ } ] } }
/* .babelrc.js */{ "presets": ["es2015"]}
需要特别注意的是， babel-preset-es2015 虽然可以对ES6转码，但是它只会对ES6的语法进行转码，并不会对API进行转码。也就是说它可以对箭头函数，promise转码，但不会对Array.from，Array.find等转码。
Babel-plugin-transform-runtime
安装:
cnpm i babel-plugin-transform-runtime -D
使用：
/* .babelrc */{ "presets": ["es2015"], "plugins": ["transform-runtime"] }
这样就可以自由使用promise了。
但是这个方案有一些特点特点：官方建议在 lib 上使用，因为该方案没有全局变量和 prototype 污染。
prototype 污染，所以对于一些内置类型扩展的方法是没办法 polyfill 的。比如： Array.prototype.find Array.prototype.filter 等。但是可以对静态方法进行 polyfill。 优点： 可以按需引用。 Babel-polyfill
正是因为 babel-polyfill 的特点，让开发者通常使用 babel-polyfill 进行开发。
安装：
cnpm i babel-polyfill -D
使用：
/* main.js(入口文件) */import 'babel-polyfill'
这样就OK啦，在使用 babel-polyfill 后，就不需要引入 babel-plugin-transform-runtime 了，并且它在浏览器支持Promise时使用 原生的promise，如果不支持才会使用polyfill。
但是最大的缺点就是不能按需引用，文件比较大。