如何在汇总编译中包含 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

上的 post

这在rollup issue #473中也有记录（注意它指的是这个插件的旧名称rollup-plugin-npm）

然后您可以运行通过 rollup -c

汇总

您还需要 "roll your own" 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：

rollup -c -w

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

how to include use of node_modules in rollup compile

javascript

d3.js

rollup