去官网找配置https://www.babeljs.cn/
第一种方式:全局处理使用 babel/polyfill,该种方式会造成全局污染
webpack.config.js中的配置
npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev
npm install --save @babel/polyfill
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader", // 是webpack和loader通讯的桥梁, 但是babel-loader并不会把ES6转为ES5; babel/preset-env能够将ES6转为ES5
options: { // 使用transform-runtime
"presets": [["@babel/preset-env",{
"useBuiltIns": "usage", // 定义处理引用的语法 按需引入
"targets": { // 定义运行浏览器的最小版本
"chrome": "58"
}
}]] // 无法处理太新的方法 使用babel/polyfill能够处理,但是会污染全局
}
}
在需要处理的业务js代码模块中引入,babel/polyfill进行处理
import "@babel/polyfill"; // 使用babel/polyfill能够处理,但是会污染全局 使用 transform-runtime
const arr = [
new Promise(() => {}),
new Promise(() => {})
]
arr.map(item => {
console.log(item);
})
第二种方式:使用transfrom-runtime进行闭包注入式,避免全局污染
webpack.config.js的配置
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
corejs使用 2 配置项
npm install --save @babel/runtime-corejs2
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader", // 是webpack和loader通讯的桥梁, 但是babel-loader并不会把ES6转为ES5; babel/preset-env能够将ES6转为ES5
"options": {
"plugins": [["@babel/plugin-transform-runtime",{ // 处理ES6转为ES5,以闭包方式注入,避免全局污染
// 配置参数
"corejs": 2, // 选择2库进行打包
"helpers": true,
"regenerator": true,
"useESModules": false
}]]
}
}
或者将webpack.config.js中的options提取到配置文件.babelrc文件中
{
"plugins": [["@babel/plugin-transform-runtime",{
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}]]
}