Laravel 混合 : Configure Babel for IE11 compatibility (transformations and polyfills)

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 的 Babeljs 文档2 ，我们首先需要安装 core-js(包含 polyfills):

$ npm install core-js@3 --save

第二步:配置 .babelrc
创建 .babelrc项目根目录下的文件:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": {
                    "version": 3,
                    "proposals": false
                },
                "targets": {
                    "ie": "11"
                }
            }
        ]
    ]
}

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

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

node_modules 不通过 babel 处理

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

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

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

如果没有 .babelrc存在，指定的文件通过 babel 运行。

如果 .babelrc存在，正常的 mix 编译步骤已经使用了 babel。使用 mix.babel导致编译步骤运行两次。

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

SCRIPT5009: 'require' is undefined