首页 > 解决方案 > 将 d3-cloud 与 rollup 集成(实际上是 Svelte)

问题描述

我有以下使用 d3-cloud 的 Svelte 3 项目。我将它包含在头端之前的 index.html 中,如下所示:

  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"></script>
</head>

我想在我的 index.html 中删除对它的任何引用并将其包含在 npm 中,如下所示:

npm install npm i d3@3 d3-cloud

这就是我在 package.json 中得到的

  "dependencies": {
    "d3": "^3.5.17",
    "d3-cloud": "^1.2.5",
    "sirv-cli": "^0.4.4"
  },

我有一个引用 d3 和 d3.layout.cloud() 的 js 函数

我尝试在我的 index.html 中评论对 d3 的引用,然后:

import * as d3 from 'd3'
import * as d3cloud from 'd3-cloud'

尽管如此,我仍然从汇总中收到此消息:

(!) Missing exports
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src\lib\wordCloud.js
scale is not exported by node_modules\d3\index.js
20:   function __wordCloud(selector, width = 500, height = 500) {
21:
22:     const fill = d3.scale.category20();
                        ^
23:
24:     d3.select(selector).selectAll("*").remove();
src\lib\wordCloud.js
select is not exported by node_modules\d3\d3.js
25:   const fill = d3.scale.category20();
26:
27:   d3.select(selector).selectAll("*").remove();
         ^
28:
29:   //Construct the word cloud's SVG element
src\lib\wordCloud.js
layout is not exported by node_modules\d3\index.js
71:       // of the wordCloud return value.
72:       update: function(words) {
73:         d3.layout.cloud().size([width, height])
               ^
74:           .words(words)
75:           .padding(5)
src\lib\wordCloud.js

当我运行代码时,我在浏览器控制台上收到此错误:

TypeError: this is undefined d3.js:8:20
    d3 d3.js:8
    d3 d3.js:9554
    createCommonjsModule bundle.js:402
    app bundle.js:405
    <anonymous> bundle.js:10424
[...]

我也尝试将它添加到我的 rollup.config.js,但我想这不是我的意思(我不想将它作为外部资源,但捆绑在我的 bundle.js 中)

[...]
    name: 'app',
    file: 'public/bundle.js',
    globals: { 'd3': 'd3' },
    external: ['d3']
  },
  plugins: [
[...]

我想让汇总处理我的前端依赖项(如 d3 和 d3-cloud)并将它们包含在我的 bundle.js 中(我仍然不太了解如何使用捆绑程序来处理前端依赖项)

我该怎么做?

标签: javascriptd3.jsrollupjssveltesvelte-3

解决方案


推荐阅读