Skip to content

Component and npm

Samuel Rapana Betio edited this page May 13, 2018 · 1 revision

Many developers are drawn to Component because they see it as a way of easily running browser code in Node, and visa versa. While this is possible, it is not one of Components primary goals. Don't worry, all is not lost; you probably won't care much after you realize how many modern, first-rate Components are available.

If you still want to try to either use components in Node/browserify, or npm packages with browser components, here are your options:

  1. Don’t publish to npm. Instead name the npm package (in package.json) exactly the same as the component (in component.json) and use the lesser known npm feature that lets you reference Github repositories directly. You can see this in action at ianstormtaylor/is which installs by npm install ianstormtaylor/is. The downside is you have to pin dependenciess with the #x.x.x syntax, and your versions in your package.json aren’t ideal.

  2. Publish to npm with the owner-repo name (e.g. component-model), which means you can require it in component with the same owner-repo name because of how the aliases work. i.e. require('component-emitter').

2a. Run add-component-symlinks after running npm install, and then you can use the component-preferred names when doing the require calls. i.e. require('emitter').

  1. Publish to npm with whatever name you want, and then have a try/catch in your file requiring the component by both of its names, one for component and one for npm. See segmentio/validator for an example.

  2. Use a special module that augments Component's require(). Pass in two different names, and the augmented require() will try to resolve each of them internally. This is basically a nicer API for the try/catch method. See CamShaft/require-component.

  3. Use module.client, module.component, or forbeslindesay/is-browser to include the appropriate component/package with a ternary: module.component ? require('model') : require('component-model').

Clone this wiki locally