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 に含めたいと思います (フロントエンドの依存関係のバンドラーを操作する方法がまだよくわかりません)。
どうすればいいですか？