使用babel处理ES6语法
官网:https://babeljs.io/
1.npm i -D babel-loader @babel/core @babel/preset-env
# 安装
babel-loader 和 @babel/core 和 @babel/preset-env
- babel-loader: 是 webpack 和 babel 通讯的桥梁,使 webpack 和 babel 打通,babel-loader 并不会把 js 中的 ES6 语法转换成 ES5 语法
- @babel/core: 是 babel 的核心语法库,它能够让 babel 识别 js 代码里面的内容并做转化
- @babel/preset-env: 将 ES6 语法转换成 ES5 语法,它包含了所有 ES6 语法转换成 ES5 语法的翻译
2.@babel/polyfill
使用 @babel/polyfill
npm i -D @babel/polyfill
# 安装 @babel/polyfill
import ‘@babel/polyfill’ # 在入口文件 index.js 第一行引入 @babel/polyfill
index.js
require("@babel/polyfill")
上面配置好之后,会发现打包后的文件特别大,因为一些没用到的 ES6 语法也被打包了进去,因此需要做如下操作:
删除入口文件 index.js 中的 import ‘@babel/polyfill’
npm install core-js regenerator-runtime -D
入口文件 index.js 中添加import ‘regenerator-runtime/runtime’;
注意:
npm install core-js regenerator-runtime -D // babel7.4之后的兼容浏览器规则包。babel/polyfill被废弃
https://babeljs.io/docs/en/babel-runtime-corejs2
配置:
// webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
corejs: 3,
useBuiltIns: 'usage',
targets: { // 通过 targets 指定项目运行的环境,打包时会自动判断是否需要去解析转化代码
chrome: '67'
}
}
]
]
}
}]
}
}
3.$ yarn add @babel/runtime @babel/plugin-transform-runtime -D
如果写的是业务代码,可采用上面方法使用 polyfill 去打包;
如果是开发组件或者库的话,可使用 plugin-transform-runtime
polyfill 会污染全局环境,plugin-transform-runtime 会以闭包的形式帮助组件去引入相关内容
4.$ yarn add @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators
基于插件处理ES6/ES7中CLASS的特殊语法
案例:
src目录
index.js
require("@babel/polyfill")
@log
class A {
constructor() {
}
sum() {
console.log("sum")
}
n = 10;
static m = 20;
static fun() {
console.log("fun")
}
}
function log(target) {
target.decorator = true
}
A.fun()
new A().sum()
console.log(new A().n)
console.log(A.m)
console.log(A.decorator)
function sum() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(100)
}, 1000)
})
}
async function fn() {
let n = await sum()
console.log(n)
}
fn()
webpack.config.dev.js
module:{
rules:[
...
{
test: /\.js$/i,
use: [{
loader: "babel-loader",
options: {
//=>转换的语法预设(ES6->ES5)
presets: [
"@babel/preset-env"
],
//=>基于插件处理ES6/ES7中CLASS的特殊语法
plugins: [
["@babel/plugin-proposal-decorators", {
"legacy": true
}],
["@babel/plugin-proposal-class-properties", {
"loose": true
}],
"@babel/plugin-transform-runtime"
]
},
}],
//=>设置编译时忽略的文件和指定编译目录
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/
}
]
}