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

在babel-preset-env 2的Babeljs文档之后，我们首先需要安装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混合文档建议使用Vanilla JS部分1中的mix.babel函数。这似乎是做什么的：

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

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

SCRIPT5009: 'require' is undefined

Answer 2

似乎有些人使用mix.babel()，但我认为它与react更好地兼容。我遇到了类似的问题，并且使用了babel-loader，@babel/preset-env和@babel/polyfill。不得不求助于polyfill cos，我无法按照他们的文档工作core-js 3。因此，如果有人能够弄清楚如何使其与core-js 3一起使用。我很高兴学习。而且只安装我似乎需要的项目

安装：

npm install babel-loader @babel/preset-env @babel/polyfill --save

Webpack.mix.js

module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }

最后，在main/js或app/js的开头导入

import '@babel/polyfill';

已在Laravel 7.x | vue 2.6

上进行了测试

依赖项：

"@babel/polyfill": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"babel-loader": "^8.1.0",

注意：我决定从根应用程序中完全删除.babelrc，看似没有任何效果，但是如果我需要，我宁愿将其添加到config.js中。

Answer 3

这就是我设法使网页在IE11上运行的方式。 我列出了所有与Babel相关的软件包，尽管其中一些只是使Jest工作所需的。

package.json

"devDependencies": {
  "@babel/core": "^7.10.5",
  "@babel/plugin-transform-runtime": "^7.10.5",
  "@babel/preset-env": "^7.10.4",
  "@babel/runtime-corejs3": "^7.10.5",
  "babel-core": "^7.0.0-bridge.0",
  "babel-jest": "^24.9.0",
},

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "bugfixes": true,
        "targets": ">0.25%",
        "corejs": {
          "version": 3,
          "proposals": false
        }
      }
    ]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", { "corejs": 3 }]
  ]
}

最后

app.js

import './bootstrap';
import "core-js";
import Vue from 'vue';
// ...

我必须说我对useBuiltIns属性感到困惑，因为不同的文章指向不同的方向。看来，如果您使用"useBuiltIns": "usage"，则无需在core-js中导入app.js，无论如何，我尝试了不同的组合，并且此组合可以正常工作。

根据core-js的{​​{3}}，您需要导入它，但是我不确定100％正确。这两篇文章为我指明了正确的方向：readme和https://www.valentinog.com/blog/preset-env/。

完成此设置后，我们只需要更新一些CSS即可运行该应用程序。唯一的缺点是vendor.js文件非常繁重。我想为支持模块的浏览器创建一个不同的捆绑包，但这是另一回事...