如何为 IE11 内联 Rollup/Babel polyfill

Question

我从事 PHP 项目有一段时间了，客户在最后一刻要求支持 IE11。 HTML/CSS 问题我可以处理，但我的 javascript 是用现代语法编写的。

所以我安装了 node，在第一次需要它时通过 Rollup & Babel 获取我的 javascript，运行它并缓存结果以供将来请求使用。

现在输出缺少之前让我头疼的箭头函数，但我遇到了一个更大的问题：polyfill 是导入语句而 IE11 不支持导入语句.

我觉得我需要强调我不是运行节点服务器 - 它是一个 PHP 服务器，我只是在后端使用节点用于汇总和巴别塔。如果节点做了一些事情来使这项工作我不熟悉它。

这是我的 rollup.config.js:

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import minify from 'rollup-plugin-babel-minify';

export default {
  input: '_dud_input.js', // These are set in the exec() call
  output: {
    file: '_dud_output.js', // These are set in the exec() call
    format: 'iife',
    strict : false
  },
  plugins: [
    resolve({
      browser: true
    }),
    commonjs({
      sourceMap: false
    }),
    babel({
      exclude: 'node_modules/**' // only transpile our source code
    }),
    minify({
      "comments": false
    })
  ]
};

这里是 babel.config.js:

module.exports = {
  "presets" : [
    [
      "@babel/preset-env",
      {
         "targets": {
           "browsers": "> 0.5%, ie >= 11"
         },
        "modules": false,
        "spec": true,
         "useBuiltIns": "usage",
         "forceAllTransforms": true,
         "corejs": {
           "version": 3,
           "proposals": false
         }
      }
    ]
  ]
}

笑笑，这是我调用运行过程的 shell 脚本：

#!/bin/bash

set -e

# Expected argument values:
#  - Path of the root directory
#  - Path of the node binary
#  - Path of the rollup binary
#  - Source file path
#  - Destination file path

if [ $# -ne 5 ]
  then
    exit 99
fi

ROOT_DIR=
NODE_BIN=
ROLLUP_BIN=
SRC_PATH=
DEST_PATH=

cd ${ROOT_DIR}

${NODE_BIN} ${ROLLUP_BIN} -c ${ROOT_DIR}/rollup.config.js -i ${SRC_PATH} -o ${DEST_PATH}

它的链接是这样的：

<script defer="" type="text/javascript" src="http://example.com/site-asset/flatfile.js"></script>

使用这些设置，我的 flatfile.js 输出顶部有以下内容：

import"core-js/modules/es.symbol";
import"core-js/modules/es.symbol.description";
import"core-js/modules/es.symbol.iterator";
import"core-js/modules/es.array.concat";
import"core-js/modules/es.array.filter";
import"core-js/modules/es.array.find";
import"core-js/modules/es.array.for-each";
// ...etc...

在此设置下，IE11 的控制台显示每个文件的第一行都有一个 Syntax error 和导入语句。

将 useBuiltIns 从 usage 更改为 entry（我理解这意味着我希望在其他地方有一个添加 polyfill 的入口文件）并包括 https://polyfill.io/v3/什么都不做（我在 Number.parseFloat() 调用时出错）。

出于绝望，我什至在我的应用程序中添加了一个 "core-js" 路由，它试图提供适当的 core-js 文件——但没有迹象表明 IE11 甚至试图遵循 require 语句。

环顾互联网，似乎这对其他人来说不是问题 - IE11 显然适用于其他人？

也许是因为我没有使用节点服务器，而是 PHP/Apache 节点服务器？

我只是希望 Babel 在我的文件中包含 core-js polyfill，而不是 IE11 无法解析的 require 语句。

Answer 1

我不得不禁用 babel-minify 插件，但除此之外，复制您的配置似乎工作正常，我得到一个没有导入语句的捆绑 JavaScript 文件。

文件转载如下，但完整的测试仓库可在 https://github.com/akx/so58712204 – yarn; yarn build 中找到，并查看 dist/...

babel.config.js

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          browsers: "> 0.5%, ie >= 11"
        },
        modules: false,
        spec: true,
        useBuiltIns: "usage",
        forceAllTransforms: true,
        corejs: {
          version: 3,
          proposals: false
        }
      }
    ]
  ]
};

package.json

{
  "scripts": {
    "build": "rollup -c ./rollup.config.js -i ./src/entry.js -o ./dist/output.js"
  },
  "dependencies": {
    "@babel/core": "^7.7.0",
    "@babel/preset-env": "^7.7.0",
    "core-js": "^3.3.6",
    "rollup": "^1.26.3",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-babel-minify": "^9.1.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0"
  }
}

rollup.config.js

import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
import babel from "rollup-plugin-babel";

export default {
  input: "_dud_input.js", // These are set in the exec() call
  output: {
    file: "_dud_output.js", // These are set in the exec() call
    format: "iife",
    strict: false
  },
  plugins: [
    resolve({
      browser: true
    }),
    commonjs({
      sourceMap: false
    }),
    babel({
      exclude: "node_modules/**" // only transpile our source code
    })
  ]
};

src/entry.js

import { magicNumber } from "./magic";
console.log(new Set([Number.parseFloat(magicNumber)]));

src/magic.js

const magicNumber = "8.82";
export { magicNumber };

如何为 IE11 内联 Rollup/Babel polyfill

How to inline Rollup/Babel polyfills for IE11

javascript

php

internet-explorer-11

babeljs

rollupjs

babel.config.js

package.json

rollup.config.js

src/entry.js

src/magic.js