d3 4.x 的 es6 模块导入失败答案

【问题标题】：es6 module import of d3 4.x failsd3 4.x 的 es6 模块导入失败
【发布时间】：2018-07-06 09:37:08
【问题描述】：

TL;DR：将 d3 导入 es6 模块的记录方法失败。这样做的正确方法是什么？我的猜测是文档假设我使用了解决这些问题的工作流程

详情： d3 4.x 的自述文件说：

D3 是使用 ES2015 模块编写的。使用 Rollup、Webpack 或您喜欢的捆绑器创建自定义捆绑包。要将 D3 导入 ES2015 应用程序，请从特定 D3 模块导入特定符号：

从“d3-scale”导入 {scaleLinear}；

或将所有内容导入命名空间（此处为 d3）：

从“d3”导入*作为d3；

然而，当我yarn add d3 并使用 es6 脚本标签时，这不起作用：

<html>
<head>
  <title>D3</title>
</head>
<body>
  <script type="module">
    import * as d3 from "./node_modules/d3"
  </script>
</body>
</html>

加载模块脚本失败：服务器以“text/html”的非 JavaScript MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。

将导入替换为：

  import * as d3 from "./node_modules/d3/index.js"

..给出这个错误：

未捕获的类型错误：无法解析模块说明符“d3-array”

【问题讨论】：

2021，我也面临同样的问题。您（或其他任何人）是否能够找到（更简单的）解决方案？

标签： d3.js es6-modules

【解决方案1】：

@jimmont 是正确的：由于“裸”导入，如果没有本地构建，导入 d3 包的模块形式将不起作用。这些可以通过 CDN 的 D3 使用解决，特别是 unpkg.com。这是故事。

事实证明 d3 使用 package.json 允许它从单个源（npm 本身）导出两种格式。为此，它使用模块：字段。

访问所有 d3 或子模块/repo（其中有 30 个！）的最简单方法是 unpkg：

回购的仪表板：https://unpkg.com/d3/
当前的 umd/iife：https://unpkg.com/d3
所有模块的当前集合：https://unpkg.com/d3?module

要导入所有 d3：

import * as d3 from 'https://unpkg.com/d3?module'

导入子模块：

import * as selection from 'https://unpkg.com/d3-selection?module'

【讨论】：

【解决方案2】：

es6 和 es2015 模块不适用于 d3，因为 d3 已选择使用汇总。您会看到此错误，因为无法按照文件“./node_modules/d3/index.js”中的指定解析模块，该文件具有像export {default as ascending} from "./src/ascending"; 这样的行，其中缺少以“.js”结尾的真实文件名。所以换句话说，所有这些条目都被错误配置为不支持浏览器或 Nodejs 中的本机模块。

您可以使用汇总或使用脚本或手动进行所有文本替换。我使用 perl 单线，因为我不喜欢汇总，并且节点 8 和节点 10 之间的额外依赖关系中断。令人难以置信的是，这是必要的，但我也没有支持模块加载器的厨房水槽。

从“./node_modules/d3-something/index.js”导入 * as d3

它的内容类似于 export {default as something} from './src/thing'。因为这些文件不使用具有完整相对路径的本机支持的语法（它缺少实际的文件扩展名），所以如果没有汇总或进行这些更正，它将无法工作。多个受欢迎的项目都做出了同样的决定，需要额外的模块才能正常工作并放弃原生支持。

见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

【讨论】：