web-dev-qa-db-ja.com

ロールアップコンパイルにnode_modulesの使用を含める方法

このメッセージが繰り返し表示され、d3.jsを配布ファイルに含めようとしています。

'd3.js'を外部依存関係として扱う

このプラグインを使ってみました

import includePaths from 'rollup-plugin-includepaths';

var includePathOptions = {
  paths: ['node_modules/d3/d3.min.js'],
  include: {
    d3: 'd3'
  },
};

私は何が欠けていますか？

javascriptd3.jsrollup
9
user2167582

注：これは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の同期を維持するだけでよく、クライアントコードは気になりません。

変更後は、ロールアップを再実行する必要があることに注意してください。

9
Bae