如何在匯總編譯中包含node_modules的使用

Question

我反復收到此消息，我試圖將d3.js包含在我的分發文件中。

將'd3.js'視為外部依賴

我試過使用這個插件

import includePaths from 'rollup-plugin-includepaths';

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

我錯過了什么？

Answer 1

注意：這是針對d3js v4的 （我不確定它是否適用於v3）

您需要使用rollup-plugin-node-resolve來匯總node_modules中的依賴關系。

你通過npm install --save-dev rollup-plugin-node-resolve安裝它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集成的帖子

匯總問題＃473中也記錄了這一點（ 注意它是指這個插件的舊名稱匯總插件-npm）

然后，您可以通過rollup -c運行匯總

您還需要使用您需要的位“自行滾動”d3模塊。 這樣你仍然可以使用帶有d3.*前綴的網絡示例。 我最初將相關位導入到我的客戶端代碼中，但沒有辦法將所有這些都合並到一個命名空間中。

從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同步，你的客戶端代碼就不在乎了。

請記住，您需要在任何更改后重新運行匯總。