使用 browserify 捆绑 D3 库的问题

Question

我想学习D3库。所以我通过 npm 安装了它。一段时间后，我在 svg 对象上应用 t运行sition 时遇到了问题（请在此处查看我的原始问题：transision() causes Uncaught TypeError with D3 version 7.2.1）。我被建议捆绑图书馆来解决这个问题。

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

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

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

.....\node_modules\d3\src\index.js:1 从“d3-array”导出*； ^ ParseError: 'import' and 'export' may appear only with 'sourceType: module'

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

Answer 1

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

Browserify 允许您将多个 javascript 文件合并为一个文件。这实际上只是让您无需在 html.

中包含多个 <script> 标签

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

D3 似乎是用支持 import/export 语句的 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');

使用 browserify 捆绑 D3 库的问题

Issue with using browserify to bundle D3 library

javascript

d3.js

bundle

browserify

答案