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

仅供参考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

Answer 2

注意:这是针对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集成的帖子

汇总问题#473中也记录了这一点(注意它是指这个插件的旧名称汇总插件-npm)

然后你可以通过运行汇总 rollup -c

您还需要使用您需要的位"自行滚动"d3模块.这样,您仍然可以使用带有d3.*前缀的Web示例.我最初将相关位导入到我的客户端代码中,但没有办法将所有这些都合并到一个命名空间中.

从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同步,而您的客户端代码将无关紧要.

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