安装配置
babel-loader与@babel/core
babel-loader : webpack与Babel通信的桥梁，不处理转译
@babel/core : 核心库，让Babel识别js语法，并把js语法转换成AST抽象语法树
npm install --save-dev babel-loader @babel/core
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules在外，第三方代码已经处理了，不需要使用
loader: 'babel-loader'
}
]
}
@babel/preset-env
将ES6语法转换成ES5语法，包含翻译的语法规则
npm install @babel/preset-env --save-dev
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules在外，第三方代码已经处理了，不需要使用
loader: 'babel-loader',
options: { // 配置
presets: ['@babel/preset-env']
}
}
]
}
@babel/polyfill
一些浏览器不存在es6的实现，即使es6的语法转换成了es5，但是还是有一些内容浏览器不支持。babel/polyfill包含了所有es6语法的实现
npm install --save @babel/polyfill
方式一、业务逻辑方式
会以全局变量的方式注入es6语法，污染全局变量
// 在业务逻辑最顶端引入
import "@babel/polyfill";
全部打包的话，main.js文件会太大，包含所有es6语法，所以只打包业务中使用的es6语法规则
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules在外，第三方代码已经处理了，不需要使用
loader: 'babel-loader',
options: { // 配置
presets: [['@babel/preset-env', {
useBuiltIns: "usage", // 只打包使用的es6语法
targets: { // 用于那些版本的浏览器上，补充相应的es6语法
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
}]]
}
}
]
}
方式二、类库方式
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules在外，第三方代码已经处理了，不需要使用
loader: 'babel-loader',
options: { // 配置
"plugins": [["@babel/plugin-transform-runtime", {
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}]]
}
}
]
}
将"corejs": false,改为"corejs": 2,，然后安装
// 包含es6的语法
npm install --save @babel/runtime-corejs2
提取配置项
新建.babelrc文件，将配置项放进去，里面不可以写注释
{
presets: [['@babel/preset-env', {
useBuiltIns: "usage",
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
}]]
}
{
"plugins": [["@babel/plugin-transform-runtime", {
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}]]
}
文档
官网
在哪里使用
babel-polyfill
usage
babel-plugin-transform-runtime
