Geek Answers Handbook

How to enable the use of node_modules in folding

I repeatedly get this message and I am trying to include d3.js in my distribution file.

Processing "d3.js" as an external dependency

I tried using this plugin

import includePaths from 'rollup-plugin-includepaths'; var includePathOptions = { paths: ['node_modules/d3/d3.min.js'], include: { d3: 'd3' }, };

What am I missing?

+5
source share
1 answer

Note: This is for d3js v4 (I'm not sure if this is possible with v3)

You need to use rollup-plugin-node-resolve to make rollup aware of dependencies in node_modules.

You install it via npm install --save-dev rollup-plugin-node-resolve (Note: I'm new to all this, the Babel plugin might not be needed)

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' };

You must use jsnext:main , otherwise you will get errors like Export '<function>' is not defined by 'path/to/node_module/file.js'

Adapted from the message integrate with rollup and es2015

This is also described in problem rollup # 473 ( note ). This refers to the old name of this plugin -plugin-NPM)

Then you can run rollup with rollup -c

You also need to "roll up" your d3 module with only the necessary bits. Thus, you can use examples from the Internet with the d3.* . I originally imported the corresponding bits into my client code, but there is no way to combine all this into a single namespace.

Start with the d3 master module and paste all the export you need into your local ./d3.js file

Example 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';

Import your manual d3

 import * as d3 from "./d3"

When importing more d3, you only need to synchronize ./d3.js and your client code will be unimportant.

Remember that after any changes you will need to re-run the swap.

+6
source

More articles:


All Articles