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进行安装（注意：我对这一切都不熟悉，可能没有必要使用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'

等错误

取自integrate with rollup and es2015

上的帖子

rollup issue #473中也记录了这一点（注意它指的是此插件的旧名称rollup-plugin-npm）

然后您可以通过rollup -c

运行汇总

你还需要自己推动自己的＆＃34; d3模块只有你需要的位。这样，您仍然可以使用带有d3.*前缀的网络示例。我最初将相关位导入到我的客户端代码中，但没有办法将所有这些都合并到一个命名空间中。

从d3 master module开始，将代码中所需的所有导出粘贴到本地./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同步，并且您的客户代码不会受到关注。

请记住，您需要在任何更改后重新运行汇总。

Answer 2

仅供参考 rollup-plugin-node-resolve 已弃用，您应该使用 https://www.npmjs.com/package/@rollup/plugin-node-resolve

npm install @rollup/plugin-node-resolve --save-dev

rollup.config.js:

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [nodeResolve()]
};

使用配置文件和监视模式启动汇总：

rollup -c -w

如何在汇总编译中包含node_modules的使用

2 个答案: