在搭建webpack5.x脚手架的过程中需要将 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器，这里记录下。（无论是webpack还是babel，很多包总在变化，以前的方案用现在的版本根本跑不了，我太难了。。。这里搭建个最新版本供以后参考）。
当前使用的"@babel/core": "^7.17.5"，"webpack": "^5.69.1"
github项目地址：https://github.com/yangfeng727/webpack-learn
需要安装的babel相关依赖有
npm i babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime-corejs3 core-js@3 -D
babel.config.js【看个人喜好了，我比较喜欢用js】
module.exports = {
presets: [
[
'@babel/preset-env', {
"useBuiltIns": "usage",
// "debug": true,
"corejs":"3.21.1"
}
]
],
plugins: [
[
'@babel/plugin-transform-runtime', {
"corejs": 3 // 指定 runtime-corejs 的版本，目前有 2 3 两个版本
}
]
]
}
package.json【这里这里只贴了babel相关的代码，看完整项目上github】
{
...
"devDependencies": {
"@babel/core": "^7.17.5",
"@babel/plugin-transform-runtime": "^7.17.0",
"@babel/preset-env": "^7.16.11",
"@babel/runtime-corejs3": "^7.17.2",
"babel-loader": "^8.2.3",
"core-js": "^3.21.1",
"webpack": "^5.69.1",
"webpack-cli": "^4.9.2"
},
"browserslist": [
"> 1%",
"last 3 versions",
"not ie <= 8"
]
...
}
webpack loader配置【同样这里只贴babel相关代码，看完整项目上github】
const path = require('path');
module.exports = {
// mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../dist')
},
module: {
rules: [
...
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader'
}
}
...
]
}
...
};
这里大概说下上面用到的babel 各个包的作用
babel-loader
此 package 允许你使用 Babel 和 webpack 转译 JavaScript 文件。
@babel/core
这是babel核心，必须安装。
@babel/preset-env
就是利用你指定的任何目标环境,然后检查它们对应的插件,并传给 Babel 进行转译。本身只会编译新的语法，如箭头函数，let，const等，不会处理api，例如 [1,2,3].includes 等函数、方法。
这里package.json配置的browserslist就是我需要指定的目标环境
image.png
"useBuiltIns": "usage"是为了按需加载，减小打包体积，指定corejs版本为3.0以上某个版本，针对此参数，babel官方建议指定次要版本，因此我这里配置的"corejs":"3.21.1"。
image.png
@babel/plugin-transform-runtime
虽然上面配置了按需加载，但是在引入polyfill【注意：这里的polyfill不是指的@babel/polyfill这个包，而是“(垫片/补丁)”的意思，用来解决API层面的问题，其实就是给那些不支持的目标浏览器添加函数】时会直接修改全局变量及其原型，造成原型污染，而且在babel 转译的过程中，对 syntax 的处理可能会使用到 helper 函数。
默认情况下，babel 在每个需要使用 helper 的地方都会定义一个 helper，导致最终的产物里有大量重复的 helper；引入 polyfill 时会直接修改全局变量及其原型，造成原型污染。
@babel/plugin-transform-runtime 的作用是将 helper 和 polyfill 都改为从一个统一的地方引入，并且引入的对象和全局变量是完全隔离的，这样解决了上面的两个问题。
参考这里：【https://zhuanlan.zhihu.com/p/147083132】
@babel/runtime-corejs3
image.png
| corejs选项 | 安装命令 | 作用 |
|---|---|---|
| false | npm install --save @babel/runtime | 模拟一个ES2015的环境，就像babel-polyfill一样，只不过babel-runtime只在引入的模块中起作用。 |
| 2 | npm install --save @babel/runtime-corejs2 | 支持上面的同时，支持全局变量（例如Promise）和静态属性（例如Array.from） |
| 3 | npm install --save @babel/runtime-corejs3 | 支持上面的同时还支持实例属性（例如[].includes） |
因此，这里选择@babel/runtime-corejs3。
参考官网：https://www.babeljs.cn/docs/babel-plugin-transform-runtime
core-js@3
core-js@3指的core-js 3.x版本，因为上面使用的@babel/runtime-corejs3版本，若不同步更改@babel/preset-env 中 "corejs"为3.x版本，将报错【因为这里默认是2.0】
image.png
因此需要安装core-js@3后再更改
image.png
参考网址：因为版本原因，参考其他教程的时候可能出现报错的情况 。
https://babeljs.io/docs/en/
https://www.jiangruitao.com/babel/preset-plugin/
https://juejin.cn/post/6844904090816741384
https://www.cnblogs.com/hilsf/p/14453401.html
网友评论