21.webpack @babel-preset-env 与 babel-preset-es2015 的区别

文章参考

1. babel-preset-es2015 -> babel-preset-env
2. babel-preset-env
3. babel-preset-env：一个帮你配置babel的preset

babel-preset-env 的作用

官方解释

If you are using Babel version 7 you will need to run npm install @babel/preset-env and have “presets”: ["@babel/preset-env"] in your configuration.

问题描述

1. babel-preset-es2015， babel-preset-es2016等：支持不同版本的ECMAScript规范。 es2015 转译了ES6比ES5的新特性， es2016 转译了ES2016比ES6的新特性等等，后面还有ES7、ES8、ES9等等，如果每一个都要这样去支持，会非常的麻烦
2. babel-preset-latest： 支持现有所有ECMAScript版本的新特性，包括处于stage 4里的特性（已经确定的规范，将被添加到下个年度的）。

解决办法

babel-preset-env 功能类似 babel-preset-latest，优点是它会根据目标环境选择不支持的新特性来转译。

babel-preset-env 与 babel-preset-2015 配置区别

babel-preset-env 或者 @babel/preset-env 配置

1. 简单理解babel-preset-env 和 @babel/preset-env 是相同的东西，只是版本不一致
2. babel-preset-env将基于你的实际浏览器及运行环境，自动的确定babel插件及polyfills，转译ES2015及此版本以上的语言。

@babel/preset-env 配置

1. 安装

cnpm install -D @babel/preset-env

2. babel配置
   webpack.config.js 配置内容

{
	test: /\.(js|jsx)$/,
	// 排除 node_modules 和 bower_components 下的文件
	exclude: /(node_modules|bower_components)/,
	use: {
	  loader: "babel-loader",
	  options: {
		presets: //['@babel/preset-react','@babel/preset-env']
		[
		  "@babel/preset-react",
		  [
			"@babel/preset-env",
			{
			  // 只引用使用了新特性 polyfill
			  useBuiltIns: 'usage'
			}
		  ]
		]
	  }
	}
},

或者

.babelrc 配置内容

{
  "presets": ["@babel/env"]
}

babel-preset-env 配置

1. 安装

npm install babel-preset-env --save-dev

2. .babelrc配置

{
    "presets": ["env"]
}

在下载babel-preset-env的时候，一定要明确是哪一种，因为配置文件有些差异

babel-preset-2015 配置 (babel7 之后就不推荐了)

1. 安装

cnpm install -D babel-preset-es2015

2. .babelrc配置

{
  "presets": ["es2015"]
}

babel-preset-env可以实现基于特定环境引入需要的polyfill。

什么是polyfill?

babel为标准库中的新功能提供了polyfill，为内置对象，静态方法，实例方法，生成器函数提供支持。

babel-preset-env引入需要的polyfill两种使用方法:

core-js， 根据需要引入ES5，ES6+标准方法的实现。

1. 安装 polyfill: npm install core-js --save

2. 引入 polyfill:import "core-js";

babel-polyfill 包含core-js 和regenerate-runtime (提供 async 语法编译后的运行时环境)。

1. 安装 polyfill:npm install babel-polyfill --save

2. 引入 polyfill: import "babel-polyfill";

两种方法最终都会根据环境转译成特定的polyfill。