为什么 Babel 7 对浏览器使用 require() 函数，而浏览器对此一无所知？

我尝试在我的模块中使用 d3.js。我使用 Babel 7 来转译我的代码源。 这是我的package.json:

{
  "name": "d3_learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "build": "babel src --out-dir dist --source-maps --minified --no-comments",
    "build:watch": "npm run build -- -w"
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "entry",
          "targets": {
            "firefox": "64",
            "opera": "57",
            "chrome": "71",
            "edge": "44",
            "ie": "11"
          }
        }
      ]
    ]
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/node": "^7.2.2",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.2.3",
    "@babel/register": "^7.0.0"
  },
  "dependencies": {
    "d3": "^5.7.0"
  }
}

注意在targets我指出我对网络浏览器的版本感兴趣。浏览器一无所知require功能。只有 Node.js 知道它。

这是我的源代码：

import * as d3 from 'd3';

function draw(data) {
    // ...
}

d3.json('../data/some-data.json', draw);

但我看到 Babel 7 代码生成结果包含require功能：

"use strict";var d3=_interopRequireWildcard(require("d3"));...

因此我在浏览器中收到运行时错误：

未捕获的引用错误：未定义要求

为什么会发生这种情况以及如何解决该问题？

是的，浏览器中没有内置 require() 。

Babel 默认将导入和导出声明转换为 CommonJS (require/module.exports)。

Babel 没有做任何事情，它基本上就像const babel = code => code; 通过解析代码，然后再次生成相同的代码。

如果你想在浏览器中运行现代 JavaScript，Babel 本身是不够的，你还需要一个支持 CommonJS 模块语句的构建系统或捆绑器：

1. Babelify + 浏览器化

2. 巴别塔 + WebPack

这两个工具将转换您的 require 调用以在浏览器中工作。

1. 编译为 AMD 格式 (transform-es2015-modules-amd) 并在应用程序中包含 Require.js[我正在使用这个，因为我现有的应用程序依赖 grunt, require]

希望它有帮助，并创建了一个简单的 webpack 和 babel setup，如果需要的话请检查一下。webpack-babel 设置