Babel的两种配置

第一种：正常业务代码使用：

1.安装

npm install --save-dev babel-loader @babel/core

2.在webpack.config.js中配置

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

3.安装@babel/preset-env和@babel/polyfill和core-js@3

npm install @babel/preset-env --save-dev
npm install --save @babel/polyfill
npm install --save core-js@3

4.在.babelrc中配置

{
  "presets": [
		[
			"@babel/preset-env",
			{
				"useBuiltIns": "usage",
                "corejs": "3"
			}
		]
	]
}

第二种：在开发一些类库中使用：

1.安装

npm install --save-dev babel-loader @babel/core

2.在webpack.config.js中配置

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

3.安装

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install --save core-js@3

4.在.babelrc中配置

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": 3,
        "helpers": true,
        "regenerator": true,
        "useESModules": false,
        "version": "7.0.0-beta.0"
      }
    ]
  ]
}

总结：这两种都有安装基本的babel，
第一种就使用@babel/preset-env和@babel/polyfil这两个结合使用，由于这两种，会把一些变量弄成全局变量，所以不适合用于类库开发。
第二种就是用@babel/plugin-transform-runtime和@babel/runtime这两个结合使用，这两种会使用闭包等操作，不会造成变量污染。