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

Question

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

所以我尝试用 Babel 转换它以便在 IE11 中使用。然而，Babel 的输出似乎与 IE11 不兼容。（IE 抱怨“SCRIPT5009：'require' 未定义”。）

看来 Babel 的结果并不是真正的 JavaScript for IE11...

这里参考我做的步骤：

我安装

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

我创建了一个 babel.config.json，内容如下：

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

我的 JavaScript 文件在 src 中，所以我运行
```
 yarn babel src --out-dir lib
```
我从我的旧 HTML 文件创建了一个新的 HTML 文件，以便它从 lib 而不是 [=17] 加载 JavaScript =]:
```
 <div id = "info">...</div>
 <script src="./lib/mystuff.js"></script>
```
我在 IE11 中服务和查看 HTML 文件，但在 IE 的控制台中出现上述错误。

Answer 1

"require" 是 commonjs 模块导入函数，在浏览器中不可用 api（仅 nodejs），您可以在脚本标签和 ES6 模块导入上使用属性 type='module' 但它仅适用于较新的浏览器。否则，如果你在源代码中使用导入并想将代码发送到旧浏览器，你需要使用打包器，如 webpack、rollup 或 parcel（比 webpack 更容易设置），Babel 仅 polyfills javascript 但不会捆绑模块。

您还需要确保 babel 不会将 ES6 模块转换为 commonjs 模块 (https://babeljs.io/docs/en/babel-preset-env#modules)，因为正如我之前所说，浏览器不支持 commonjs

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

Converting a JavaScript file with Babel for use in IE11

javascript

internet-explorer

internet-explorer-11

babeljs

babel-polyfill