Question

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

我应该怎么做？

将d3云与汇总集成（实际上是Svelte）

0 个答案: