使用Browserify捆绑D3库的问题

Issue with using browserify to bundle D3 library(使用Browserify捆绑D3库的问题)

本文介绍了使用Browserify捆绑D3库的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想学习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库的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:使用Browserify捆绑D3库的问题

基础教程推荐