0

我有以下使用 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 中（我仍然不太了解如何使用捆绑程序来处理前端依赖项）

我该怎么做？

4

0 回答 0