Laravel Mix:为IE11兼容性配置Babel (转换和多边形填充)

Question

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

我用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使用polyfill。

第1步:安装Corejs以获取polyfills

在babel-preset-env核心的Babeljs文档之后，我们首先需要安装2 -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，你会发现插入了多边形填充，编译出了箭头函数等--你的代码可能只会在IE11上运行！

Laravel-Mix，Babel，IE:一些陷阱

node_modules不是通过babel处理的

使用默认配置，只有项目本身中的源代码-而不是其依赖项-才会在babel编译步骤中运行。这意味着依赖关系中的任何let或类似的东西都会破坏传统浏览器的3。

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

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

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

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

SCRIPT5009: 'require' is undefined

Answer 2

似乎有些人使用mix.babel()，但我相信它与react的兼容性更好。我也有类似的问题，我使用了babel-loader，@babel/preset-env和@babel/polyfill。我不得不求助于polyfill，因为我不能让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"，你不需要在app.js中导入core-js，不管怎样，我尝试了不同的组合，这个组合工作得很好。

根据core-js的readme，您需要导入它，但我不能百分之百确定。为我指明正确方向的其他资源是这两篇文章：https://www.valentinog.com/blog/preset-env/和https://web.dev/serve-modern-code-to-modern-browsers/。

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