使用 browserify 捆绑 D3 库的问题

Question

我想学习 D3 库。所以我通过 npm 安装了它。过了一会儿，我在 svg 对象上应用转换时遇到了一个问题（请参阅我的原始问题：transision() causes Uncaught TypeError with D3 version 7.2.1）。有人建议我捆绑图书馆来解决这个问题。

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

1. 在模块文件中使用了 require 函数，并将库名称 ("d3") 作为参数提供给它
2. 在 html 文档中引用了模块文件和 bundle.js 文件
3. 在包含模块文件的目录中运行命令：browserify module.js > bundle.js

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

....\node_modules\d3\src\index.js:1 从“d3-array”导出*； ^ ParseError: 'import' 和 'export' 可能只与 'sourceType: module' 一起出现

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

Answer 1

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

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

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

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

答案

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

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


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

targetElem.text('HELLO WORLD');