如何在没有 Webpack 的情况下使用 Babel？答案

【问题标题】：How to use Babel without Webpack?如何在没有 Webpack 的情况下使用 Babel？
【发布时间】：2019-11-04 13:59:05
【问题描述】：

我使用 babel 编译了如下所示的简单代码。

var aa = new Promise();

到

"use strict";

require("core-js/modules/es.object.to-string");

require("core-js/modules/es.promise");

var aa = new Promise();

但是，像 IE9 这样的旧浏览器无法执行该代码。因为浏览器无法解析路径core-js/modules/es.object.to-string。

我必须使用 webpack 来使用 polyfill 吗？

我不想使用 webpack。

我在 package.json 中的 babel 设置如下。

  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "corejs": 3,
          "useBuiltIns": "usage",
          "targets": ">0.2%, not dead, not ie <= 11, not op_mini all"
        }
      ],
      "@babel/preset-react"
    ]
  }

【问题讨论】：

没有浏览器支持require。您需要一个模块捆绑器将文件编译成一个文件，或者直接通过<script> 包含文件。
@FelixKling 有没有办法自动添加脚本？像这样"use strict"; ....Code of core-js/modules/es.promise... var aa = new Promise();

标签： javascript ecmascript-6 babeljs

【解决方案1】：

您可以在 index html 文件中使用 <script> 标记包含您的 polyfill 脚本，并正确排序您的 polyfill 和应用程序脚本。 require 不是浏览器可识别的命令。它是来自 node.js 的服务器端实现。

您或许可以考虑改用import？

import 'core-js';

或此处显示的特定模块https://github.com/zloirock/core-js

import 'core-js/features/promise'; -> 将修改全局命名空间

import Promise from 'core-js-pure/features/promise'; -> 不会修改全局命名空间

【讨论】：

当我在代码顶部使用import 'core-js/features/promise 时，它的工作原理相同。我想加载该代码而不是 require 函数。
"use strict"; ....Code of core-js/modules/es.promise... var aa = new Promise();