使用Babel转换JavaScript文件以在IE11中使用

问题描述

我有一个JavaScript文件mystuff.js，该文件在IE11中引发错误（由于for..of循环等）。

因此，我尝试将其与Babel转换以在IE11中使用。但是，Babel的输出似乎与IE11不兼容。 （IE抱怨“ SCRIPT5009：'require'未定义”。）

Babel的结果似乎并不是针对IE11的JavaScript ...

---

在此做我的步骤以供参考：

1. 我安装

    yarn add -D @babel/core @babel/cli @babel/preset-env
    yarn add @babel/polyfill
   

2. 我创建具有以下内容的babel.config.json：

{
  "presets": [
    [
      "@babel/env",{
        "targets": {
          "edge": "17","firefox": "60","chrome": "67","safari": "11.1","ie": "11"
        },"useBuiltIns": "usage","corejs": "3.6.4",}
    ]
  ]
}

1. 我在src中有我的JavaScript文件，所以我运行了

    yarn babel src --out-dir lib
   

2. 我从旧的HTML文件创建了一个新的HTML文件，以便它从lib而不是src加载JavaScript：

    <div id = "info">...</div>
    <script src="./lib/mystuff.js"></script>
   

3. 我在IE11中提供并查看了HTML文件，但在IE控制台中遇到了上述错误。

解决方法

“ require”是commonjs模块导入功能，在浏览器api中不可用（仅nodejs），可以在脚本标签和ES6模块导入上使用attribute type ='module'，但仅在较新的浏览器中有效。 否则，如果您在源代码中使用导入并希望将代码运送到较旧的浏览器，则需要使用捆绑程序，例如webpack，汇总或包裹（比webpack容易安装），Babel仅会填充javascript而不会捆绑模块。 / p>

您还需要确保babel不会将ES6模块转换为commonjs模块（https://babeljs.io/docs/en/babel-preset-env#modules），因为像我之前说的那样，浏览器不支持commonjs