使用Browserify捆绑D3库的问题
我想学习D3库。所以我通过NPM安装了它。一段时间后,我在对SVG对象应用转换时遇到了一个问题(请参阅我最初的问题:transision() causes Uncaught TypeError with D3 version 7.2.1)。有人建议我把库捆绑在一起来解决这个问题。
我一直在努力使用Browserify捆绑D3库。我已经完成了以下步骤:
- 在模块文件中使用了Required函数,并将库名称(";d3";)作为参数提供
- 引用了html文档中的模块文件和bundle.js文件
- 在包含模块文件的目录中运行命令: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');
相关文章