babel从入门到进阶只需搞定这几个包

安装babel：

babel目前需要安装 @bable/core 和 @babel/preset-env ，在webpack上还需要安装babel-laoder

@bable/core ：

这个比较好理解，就是babel的核心文件

@babel/preset-env:

babel预置器，这个预置器大概有一下几种版本：

es2015
es2016
es2017 
env        //包括上面三个，官方推荐只使用这个
babel-preset-react       //使用react的一些定制规范
bebel-preset-stage 0-3      //使用规范组还未正式发布的规范

众所周知babel是编译转换ES6+代码的，预置器目的是告诉babel我们会用到什么版本的js规范，babel会根据我们的指定安装所需插件和补丁

.babelrc

.babelrc配置：
格式：

{"presets" :[ "env" /* 我们用到的最新的js规范版本，官方推荐 @babel/preset-env */ , { /*env的配置options*/}] }

一些可能用到的配置项：

{
    "presets": [
        ["env", {
            "targets": { //指定要转译到哪个环境
                //浏览器环境
                "browsers": [">1%", "last 2 versions", "safari >= 7"],
                //node环境
                "node": "6.10", //"current"  使用当前版本的node
            },
             //是否将ES6的模块化语法转译成其他类型
             //参数："amd" | "umd" | "systemjs" | "commonjs" | false，默认为'commonjs'
            "modules": 'commonjs',
            //是否进行debug操作，会在控制台打印出所有插件中的log，已经插件的版本
            "debug": false,
            //强制开启某些模块，默认为[]
            "include": ["transform-es2015-arrow-functions"],
            //禁用某些模块，默认为[]
            "exclude": ["transform-es2015-for-of"],
            //是否自动引入polyfill，开启此选项必须保证已经安装了babel-polyfill
            //参数：Boolean，默认为false.
            "useBuiltIns": false
        }]
    ]
}

babel-loader：

webpack内结合babel-loader配置预置器选项：
可以直接把babelrc的配置写在webpack.config.js内，不用在外面新建.babelrc了：

//webpack.config.js：

module.exports={
	...
	module:{
		rules:[
			{test:/\.js$/,
			use:{
				loader:'babel-loader',
				options:{
					presets:[     //和babelrc一样的配置，只是写在options里了
						['@babel/preset-env',{
							targets:{
								"browsers": [">1%", "last 2 versions", "safari >= 7"],
							}
						}
					]
				}
			}
		]
	}
	...
}

@babel/polyfill：

上面用到的babel的preset预置器只是针对于语法，对于函数、方法：
generator set map Array.from Array.prototype.includes 等等

会污染全局变量（会重写但是命名不变），应用场景使用：
npm install babel-polyfill --save

用法：
import 'babel-polyfill 引入即可

关于polyfill还有个叫做polyfill.io的神器，只要在浏览器引入

https://cdn.polyfill.io/v2/polyfill.js

服务器会更具浏览器的UserAgent返回对应的polyfill文件，很神奇，可以说这是目前最优雅的解决polyfill过大的方案。

@babel/polyfill 在preset-env的新版本下已不推荐使用：

@babel/polyfill是一个简单的包，包含core-js和regenerator-runtime这两个包。当core-js升级到3.0的版本后，将放弃使用@babel/polyfill，因为它只包含core-js 2.0的版本。所以在@babel/prest-env升级到7.4.0并且使用core-js@3，需要做如下的替换工作

// 安装[email protected] 和 regenerator-runtime
yarn add core-js@3
yarn add regenerator-runtime


// babel.config.js
presets: [
  ["@babel/preset-env", {
    useBuiltIns: "entry", // or "usage"
    corejs: 3,
  }]
]


// 入口文件index.js
// before
import "@babel/polyfill";

// after
import "core-js/stable";
import "regenerator-runtime/runtime";

@babel/plugin-runtime-transform

npm install @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime --save
局部垫片，不会污染全局变量(重写且命名改变new Set()会被编译成 new _Set())
大小比polyfill小
必须要在babelrc下配置

{"preset":["env",{ /* 预置器的一些配置见上文*/}],
  "plugins":["@babel/plugin-transform-runtime"]
}