动态导入 d3.js 作为模块?

Question

尝试根据 es6 语法特性 (https://developers.google.com/web/updates/2017/11/dynamic-import#dynamic) 从我现有的模块中动态导入("延迟加载")d3 作为模块，以使其自力更生。https://d3js.org/d3.v5.min.js 的源代码不包含"export"语句，只有一个文字函数调用(

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.d3=t.d3||{})}(...)

)，但它确实被检索到，只是它没有收到它期望从正常的<script src="https://d3js.org/d3.v5.min.js"/>标签导入中获得的参数。我如何手动提供它们，或者我应该如何做到这一点？谢谢！

import('https://d3js.org/d3.v5.min.js').then(function(d3){d3.json()})

d3.v5.min.js:2 Uncaught (in promise) TypeError: Cannot read property 'd3' of undefined
at d3.v5.min.js:2

Answer 1

我的第一个猜测是错误的...
发生此错误是因为此d3构建正在尝试读取this.d3(接收this的函数参数称为global，或在缩小版本中称为t)，但this在模块上下文中未定义(脚本在imported 时在其中运行)。

它只是用于生成此d3构建的任何构建工具中的错误。它应该使用self(或者可能是this || self)。

例如，rollup曾经有过此错误，但不久前已修复。

---

无论如何，即使在修复d3之后，您也不会得到任何.then()，它将d3设置为全局。(除非他们发布 ES 模块版本。