webpack-babel

2024年01月09日

柏拉文

越努力，越幸运

一、认识

---

ECMAScript 6.0(简称 ES6) 版本补充了大量提升 JavaScript 开发效率的新特性，包括 class 关键字、块级作用域、ES Module 方案、代理与反射等，使得 JavaScript 可以真正被用于编写复杂的大型应用程序，但直到现在浏览器、Node 等 JavaScript 引擎都或多或少存在兼容性问题。为此，现代 Web 开发流程中通常会引入 Babel 等转译工具。

Babel 是一个开源 JavaScript 转编译器，它能将高版本 —— 如 ES6 代码等价转译为向后兼容，能直接在旧版 JavaScript 引擎运行的低版本代码，例如：

// 使用 Babel 转译前
arr.map(item => item + 1)

// 转译后
arr.map(function (item){
  return item + 1;
})

示例中高版本的箭头函数语法经过 Babel 处理后被转译为低版本 function 语法，从而能在不支持箭头函数的 JavaScript 引擎中正确执行。借助 Babel 我们既可以始终使用最新版本 ECMAScript 语法编写 Web 应用，又能确保产物在各种环境下正常运行。

二、安装依赖

---

安装编译时依赖

pnpm install webpack webpack-cli @babel/runtime @babel/core @babel/preset-env babel-loader @babel/plugin-transform-runtime -D

• @babel/runtime: 将所有文件用到的公用辅助函数抽离出来形成一个第三方文件

• @babel/plugin-transform-runtime: 自动识别哪些文件使用了哪些公用辅助函数，自动在那些文件中引入辅助函数

安装运行时依赖

pnpm install core-js regenerator-runtime -S

• core-js

• regenerator-runtime

三、编译配置

---

3.1 .browserslistrc

> 0.1%
last 2 versions
ie>=9

3.2 babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        corejs: 3,
        modules: false,
        useBuiltIns: false,
      }
    ]
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 3
      }
    ]
  ]
};

3.3 webpack.config.js

const path = require('path');

function resolve() {
  return path.resolve(__dirname, ...arguments);
}

module.exports = {
  entry: resolve('./src/index.js'),
  output: {
    filename: 'index.js',
    path: resolve('./dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  }
};

四、脚本配置

---

package.json 中新增命令如下:

"scripts": {
    "build": "webpack build --mode development --config webpack.config.js"
  },

五、测试效果

---

// 箭头函数
const add = (a, b) => a + b;

// Promise 对象
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(add(1, 2));
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(add(3, 4));
  }, 1000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(add(5, 6));
  }, 1000);
});

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // [3, 7, 11]
});

// 实例方法：Array.prototype.includes()
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true

const root = document.getElementById('root');
root.innerHTML = add(1, 3);