javascript - 如何在汇总编译中使用 node_modules

Question

我反复收到此消息，我正在尝试将 d3.js 包含到我的分发文件中。

Treating 'd3.js' as external dependency

我试过使用这个插件

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让 rollup 知道 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 运行 rollup

您还需要使用您需要的位来“滚动您自己的”d3 模块。这样您仍然可以使用来自网络的示例 d3.*前缀。我最初是将相关位导入我的客户端代码，但无法将所有这些合并到一个命名空间中。

以 d3 master module 开头并将代码中需要的所有导出粘贴到本地 ./d3.js文件

示例 roll-your-own 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同步，您的客户端代码不会在意。

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