使用Browserify捆绑D3库的问题 [英] Issue with using browserify to bundle D3 library

问题描述

我想学习D3库。所以我通过NPM安装了它。一段时间后，我在对SVG对象应用转换时遇到了一个问题(请参阅我最初的问题：transision() causes Uncaught TypeError with D3 version 7.2.1)。有人建议我把库捆绑在一起来解决这个问题。

我一直在努力使用Browserify捆绑D3库。我已经完成了以下步骤：

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

在我运行该命令后，我得到以下信息：

... Ode_modesd3srcindex.js：1 从&q；d3导出*-array"；； ^ ParseError："IMPORT"和"EXPORT"只能与"SourceType：MODULE"一起出现

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

推荐答案

在我为您提供解决方案之前，我想为您提供实际问题的上下文。

Browserify允许您将多个Java脚本文件合并为一个文件。这真的让您不必在html中包含多个<script>标记。

在我看来，它是一个更干净、更简单的webpack/ROLLUP版本，但没有那么多功能。

D3似乎是用支持导入/导出语句的Java脚本版本编写的，并使用汇总将其转换为浏览器(和浏览器)可以理解的普通Java脚本。

答案

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

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


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

targetElem.text('HELLO WORLD');

这篇关于使用Browserify捆绑D3库的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！