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>
无法加载模块脚本:服务器使用非JavaScript MIME类型"text/html"进行响应.对每个HTML规范的模块脚本强制执行严格的MIME类型检查.
用以下内容替换导入:
import * as d3 from "./node_modules/d3/index.js"
..给出了这个错误:
未捕获的TypeError:无法解析模块说明符'd3-array'
es6 和 es2015 模块不适用于 d3，因为 d3 已选择使用汇总。您看到此错误是因为无法按照文件“./node_modules/d3/index.js”中的指定解析模块，该文件中的行export {default as ascending} from "./src/ascending";缺少以“.js”结尾的真实文件名。因此，换句话说，所有这些条目都被错误配置为不支持浏览器或 Nodejs 中的本机模块。
您可以使用汇总或使用脚本或手动自己进行所有文本替换。我使用 perl one-liner 因为我不喜欢 rollup 并且额外的依赖关系在节点 8 和节点 10 之间被破坏。令人难以置信的是，这是必要的，但我也没有支持模块加载器的厨房接收器。
从“./node_modules/d3-something/index.js”导入 * 作为 d3
它具有类似 export {default as something} from './src/thing' 的内容。因为这些文件不使用带有完整相对路径的本机支持的语法（它缺少实际的文件扩展名），所以如果没有汇总或进行这些更正，它将无法工作。多个流行的项目都做出了同样的决定，需要额外的模块才能正常工作并放弃原生支持。
见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
@jimmont是正确的：由于导入的是“裸露”，因此如果没有本地构建，则无法导入d3软件包的模块形式。这些可以通过CDN的D3使用来解决，尤其是unpkg.com。这是故事。
事实证明，d3使用package.json允许它从单一来源npm本身导出两种格式。为此，它使用module：字段。
最简单的访问d3或子模块/仓库（其中有30个！）的方法是理想的：
导入所有d3：
import * as d3 from 'https://unpkg.com/d3?module'
导入子模块：
import * as selection from 'https://unpkg.com/d3-selection?module'
| 归档时间： |
|
| 查看次数： |
1542 次 |
| 最近记录： |