Laravel Mix：配置Babel以实现IE11兼容性（转换和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编译，并将polyfill用于Internet Explorer

步骤1：安装Corejs以获取polyfills >>

[Babeljs文档babel-preset-env 2之后，我们首先需要安装core-js（包含polyfills：]

$ npm install core-js@3 --save
步骤2：配置.babelrc

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

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": {
                    "version": 3,
                    "proposals": false
                },
                "targets": {
                    "ie": "11"
                }
            }
        ]
    ]
}
现在运行npm run dev，您会发现已插入polyfill，已编译出箭头函数等-您的代码可能仅在IE11上运行！

[Laravel-Mix，Babel，IE：有些陷阱

node_modules未通过babel处理

使用默认配置，在项目本身中仅源代码运行-而不是其依赖项-通过babel编译步骤运行。这意味着依赖项中的任何let或类似内容都将使旧版浏览器3跳闸。

使用`mix.babel'可能会两次编译文件

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

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

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

SCRIPT5009: 'require' is undefined