webpack使用babel处理ES6语言兼容浏览器

1.安装

搭babel桥梁–：cnpm install --save-dev babel-loader @babel/core
使用babal处理es6：cnpm install @babel/preset-env --save-dev

2.配置文件中模块loader中添加规则

{				test: /\.js$/,
				exclude: /node_modules/,//排除node里面的js文件处理
				loader: 'babel-loader',
				options: {
					presets: ["@babel/preset-env"]
				}
			}

3.这样可以处理ES6语法为ES5语法，但是这时候ES6中的一些新增的Promise或WeakMap，静态方法，如Array.from或Object.assign等等。这些不会被转义

这时候需要要到@Babel/Polyful就可以转义

3.1安装
cnpm install --save @babel/polyfill

3.2 index.js引入

import "@babel/polyfill";

黑马

3.3配置文件中

presets: [
[’@babel/preset-env’, {
// targets: {
// chrome: “67”,
// },//表示你打开项目是在大于谷歌67版本，所以babel就不会转义ES6语法（这里babel语句就都不执行）
useBuiltIns: ‘usage’ //针对相对应的业务代码需求来优化
}]

4.如果转化的是UI库或者库的话就不能用@Babel/Polyful，因为会污染全局环境

用到UI库或者库时候就用@babel/plugin-transform-runtime

4.1安装（这三个）

cnpm install --save-dev @babel/plugin-transform-runtime
cnpm install --save @babel/runtime
cnpm install --save @babel/runtime-corejs2

4.2index.js 去除 import “@babel/polyfill”;

4.3配置文件

options: {
			"plugins": [
				["@babel/plugin-transform-runtime", {
					"corejs": 2,
					"helpers": true,
					"regenerator": true,
					"useESModules": false
				}]
			]
		}