Laravel Mix:配置Babel以实现IE11兼容性(转换和polyfill) [英] Laravel Mix: Configure Babel for IE11 compatibility (transformations and polyfills)

问题描述

在具有Laravel-Mix 4的Laravel 6应用程序中，并使用Vue预设，我需要编译我的JavaScript代码以与IE11兼容.这意味着为缺少的功能添加任何polyfill，编译出箭头功能，依此类推.开箱即用，尚未完成.

In a Laravel 6 application with Laravel-Mix 4, and using the Vue preset, I need to compile my JavaScript code to be compatible for IE11. This means adding any polyfills for missing functions, compiling out arrow functions, and so on. Out of the box, this is not done.

我在resources/js/app.js中的测试代码:

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

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

With default config, laravel mix does not appear to compile JavaScript code, but only do some formatting. Comments are preserved in the compiled output.

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兼容的源代码?

推荐答案

使用Laravel Mix启用Babel编译，并将polyfill用于Internet Explorer

第1步:安装Corejs以获得polyfills

按照Babeljs文档中的babel-preset-env 2 ，我们首先需要安装core-js(包含polyfills):

Enable Babel compilation with Laravel Mix, and use polyfills for internet explorer

Step 1: Install Corejs to get polyfills

Following the Babeljs docs for babel-preset-env 2, we first need to install core-js (which contains the polyfills):

$ npm install core-js@3 --save

步骤2:配置.babelrc

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

Step 2: Configure .babelrc

create a .babelrc file in the project root:

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

现在运行npm run dev，您会发现已插入polyfill，已编译出箭头功能等.-您的代码可能仅在IE11上运行！

Now run npm run dev and you will find polyfills inserted, arrow functions compiled out etc. - your code may just run on IE11!

在默认配置下，项目本身中的源代码(而不是其依赖项)仅在babel编译步骤中运行.这意味着依赖项中的任何let或类似内容都将使旧版浏览器崩溃 3 .

With the default configuration, only source code in the project itself - not its dependencies - runs through the babel compilation step. This means that any let or similar in the dependencies will trip up legacy browsers 3.

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

The laravel mix docs suggest using the mix.babel function in the Vanilla JS section 1. What this appears to do:

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

• if no .babelrc is present, the specified file is run through babel.
• if a .babelrc is present, the normal mix compilation step already uses babel. Using mix.babel causes the compilation step to be run twice.

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

Interestingly, the twice-compiled code does not run on IE. One problem is that it will contain require() calls for polyfills that cannot be handled:

SCRIPT5009: 'require' is undefined

这篇关于Laravel Mix:配置Babel以实现IE11兼容性(转换和polyfill)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！