使用 browserify 捆绑 D3 库的问题

Question

我一直在努力使用 browserify 捆绑 D3 库。 我已经完成了这些步骤：

1. 在模块文件中使用 require function 并将其作为参数提供库名称（“d3”）
2. 在 html 文档中引用了模块文件和 bundle.js 文件
3. 在包含模块文件的目录中运行命令：browserify module.js > bundle.js

在我运行命令后，我得到了这个：

....\node_modules\d3\src\index.js:1 export * from "d3-array"; ^ ParseError: 'import' 和 'export' 可能只与 'sourceType: module' 一起出现

我完全不知道我做错了什么。

Answer 1

在我给你一个解决方案之前，我想给你一个实际问题的背景。

Browserify 允许您将多个 javascript 文件合并到一个文件中。 这确实使您无需在 html 中包含多个<script>标签。

从我的角度来看，它是 webpack/rollup 的一个更干净、更简单的版本，但通用性较差。

D3 似乎是用 javascript 版本编写的，该版本支持导入/导出语句并使用 Rollup 将其转换为浏览器（和 browserify）可以理解的普通 javascript。

答案

导入已经转译的 d3 最终版本。

const d3 = require('d3/dist/d3');


// do something with d3 here
const targetElem = d3.select('#target');

targetElem.text('HELLO WORLD');