Laravel Mix：为 IE11 兼容性配置 Babel（转换和 polyfill）

Question

在带有 Laravel-Mix 4 的 Laravel 6 应用程序中，并使用 Vue 预设，我需要编译我的 JavaScript 代码以兼容 IE11。这意味着为缺失的函数添加任何 polyfill，编译出箭头函数，等等。开箱即用，这还没有完成。

我的测试代码resources/js/app.js：

//require('./bootstrap');
let test = [1, 2, [3, 4]];
console.log(
    test.flat().map((x) => 2*x)
);

使用默认配置，laravel mix 似乎不会编译 JavaScript 代码，而只会进行一些格式化。注释保留在编译输出中。

结果npm run dev是：

       Asset      Size   Chunks             Chunk Names
/css/app.css   0 bytes  /js/app  [emitted]  /js/app
  /js/app.js  4.95 KiB  /js/app  [emitted]  /js/app

如何让 Laravel-Mix 使用 Babel 创建兼容 IE11 的源代码？

Answer 1

使用 Laravel Mix 启用 Babel 编译，并为 Internet Explorer 使用 polyfills

第 1 步：安装 Corejs 以获取 polyfills

按照babel-preset-env 2的 Babeljs 文档，我们首先需要安装 core-js（包含 polyfills）：

$ npm install core-js@3 --save

第 2 步：配置 .babelrc

.babelrc在项目根目录中创建一个文件：

$ npm install core-js@3 --save

现在运行npm run dev，你会发现插入了 polyfill，编译出箭头函数等等——你的代码可能只在 IE11 上运行！

Laravel-Mix、Babel、IE：一些问题

node_modules 不通过 babel 处理

使用默认配置，只有项目本身的源代码 - 而不是它的依赖项 - 运行 babel 编译步骤。这意味着let依赖项中的任何或类似项都会导致旧版浏览器3。

使用 `mix.babel' 有编译文件两次的风险

laravel mix 文档建议使用mix.babelVanilla JS 部分1 中的函数。这似乎是做什么的：

• 如果不.babelrc存在，则指定的文件通过 babel 运行。
• 如果 a .babelrc存在，则正常的 mix 编译步骤已经使用了 babel。使用mix.babel会导致编译步骤运行两次。

有趣的是，两次编译的代码不能在 IE 上运行。一个问题是它会包含对无法处理的 polyfill 的 require() 调用：

SCRIPT5009: 'require' is undefined