时间戳

首页 > 解决方案 > 使用 Babel 转换 JavaScript 文件以在 IE11 中使用

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

问题描述

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

所以我尝试用 Babel 转换它以在 IE11 中使用。但是 Babel 的输出似乎与 IE11 不兼容。（IE 抱怨“ SCRIPT5009: 'require' is undefined ”。）

看起来 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. 我有我的 JavaScript 文件，src所以我运行

     yarn babel src --out-dir lib

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

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

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

标签： javascriptinternet-explorerinternet-explorer-11babeljsbabel-polyfill

解决方案

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

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

推荐阅读