webpack 5.x 使用babel转换ECMAScript 2015+ 语法(附github项目地址)

在搭建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