关于babel，你需要知道的都有

babel是什么？

官网：Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

• 工具链
• 针对ECMA 2015+ ，低于ECMA2015+不必使用babel
• 为了是使用ECMA2015+的最新特性（语法，API等）在当前或者低版本浏览器能运行.

babel安装

使用babel,通常需要安装以下依赖

npm install @babel/core   @babel/cli @babel/preset-env  --save-dev
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install --save @babel/polyfill

核心概念

• @babel/core: 此模块是babel核心功能 babel.transform("code", optionsObject)
• @babel/cli： 命令行工具 npx babel src --out-dir dist --presets=@babel/env
• @babel/preset-env env标准或其他标准，告诉babel需要判断代码中使用的Api或者词法指定的浏览器是否支持，如果不支持，需要对词法或者api进行转码
• @babel/polyfill全局垫片，会造成变量污染，适合开发应用不适合开发框架. babel默认只转化Javascript新的句法，而不转换新的Api，所以需要借助@babel/polyfill，判断当前浏览器是否支持相应Api，如果不支持，借助@babel/polyfill的功能是当前环境能够支持新的API或者内置对象。
• @babel/plugin-transform-runtime需要结合@babel/runtime使用，@babel/plugin-transform-runtime最终还是调用@babel/runtime的 插件进行shim

@babel/polyfill和@babel/runtime都是垫片，区别是一个是全局垫片另一个是局部垫片，作用相同。

webpack中babel最佳实践

// 安装loader
npm install babel-loader@8.0.0-beta.0
// webpack.config.js
module.exports = {
	entry,
	output,
	module: {
		rules: [
			{
				test: /\.js$/,
				use: {
					loader: 'babel-loader'
				}		
			}
		]
	}

}

// .babelrc
{
	"presets": ["@babel/preset/env", {
		"target": ['"last 2 versions", "> 2%"]
	}],
	"plugins": ["@babel/plugin-transform-runtime"]
}