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

Question

尝试从现有模块中动态导入（“lazy-load”）d3 作为模块，以使其独立，根据 es6 语法功能（https://developers.google.com/web/updates/2017/11 /dynamic-import#dynamic）。https://d3js.org/d3.v5.min.js的源代码不包含“导出”语句，仅包含文字函数调用（

!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 模块版本。）