このメッセージが繰り返し表示され、d3.jsを配布ファイルに含めようとしています。
'd3.js'を外部依存関係として扱う
このプラグインを使ってみました
import includePaths from 'rollup-plugin-includepaths';
var includePathOptions = {
paths: ['node_modules/d3/d3.min.js'],
include: {
d3: 'd3'
},
};
私は何が欠けていますか?
注:これはd3js v4用です(よくわかりませんv3で可能)
rollup-plugin-node-resolve を使用して、ロールアップにnode_modulesの依存関係を認識させる必要があります。
npm install --save-dev rollup-plugin-node-resolve
を介してインストールします(注:これは初めてです。babelプラグインは必要ない場合があります)
rollup.config.js
import babel from 'rollup-plugin-babel';
import nodeResolve from 'rollup-plugin-node-resolve';
export default {
entry: 'path/to/your/entry.js',
format: 'umd',
plugins: [
babel(),
nodeResolve({
// use "jsnext:main" if possible
// see https://github.com/rollup/rollup/wiki/jsnext:main
jsnext: true
})
],
sourceMap: true,
dest: 'path/to/your/dest.js'
};
jsnext:main
を使用する必要があります。そうしないと、Export '<function>' is not defined by 'path/to/node_module/file.js'
のようなエラーが発生します。
ロールアップおよびes2015 と統合するに関する投稿から取得
これは rollup issue#473 (noteにも記載されています。これはこのプラグインの古い名前を指します。 rollup-plugin-npm)
次に、rollup -c
を介してロールアップを実行できます
また、必要なビットだけで「独自の」d3モジュールをロールする必要があります。そうすれば、d3.*
プレフィックスを付けたWebの例を引き続き使用できます。私はもともと関連するビットをクライアントコードにインポートしていましたが、これらすべてを1つの名前空間にマージする方法はありません。
d3マスターモジュール で開始し、コードに必要なすべてのエクスポートをローカルの./d3.js
ファイルに貼り付けます
独自のd3.jsの例
/*
re-export https://github.com/d3/d3/blob/master/index.js for custom "d3" implementation.
Include only the stuff that you need.
*/
export {
ascending
} from 'd3-array';
export {
nest,
map
} from 'd3-collection';
export {
csv, json
} from 'd3-request';
export {
hierarchy,
tree
} from 'd3-hierarchy';
export {
select
} from 'd3-selection';
手で巻いたd3をインポートします
import * as d3 from "./d3"
D3をさらにインポートするときは、./d3.js
の同期を維持するだけでよく、クライアントコードは気になりません。
変更後は、ロールアップを再実行する必要があることに注意してください。