how to set dependencies and how to compile an npm module?

Question

I have a few npm modules published, all modules for existing libraries, like three.js or react.

The packages seem to be downloaded but i've received no feedback on whether it's done right or not.

Dependencies

What is the high level goal when defining dependencies?

three.js:

This is confusing because every "extension" just assumes that there is a THREE object available in some context.

My three.js module thus only mentions:

"devDependencies": {
 "three": "^0.88.0"
}

And it's being used like this:

require( 'three-instanced-mesh' )(THREE)

Which both makes sense and doesn't.

The module can't work without three.js and a proper context passed in (THREE), but since i pass it in at runtime(?) it doesn't seem like it is an actual dependency. When I checkout the repo and want to develop in it, i do need to install three.js if i want the code to run.

React

I've published a React component which i intended to be used as such:

1. npm install my-module
2. import MyModule from 'my-module
3. <MyModule/>

For some reason I listed react as a peerDependencies dep.

<MyModule/> in JSX would imply that I've done something to have react already available in this context (similar to how THREE is passed in first example?).

The difference here is that i don't define the class at runtime, and thus calling import MyModule requires react to be available in MyModule.js?

What is the desired goal here and how to describe it? I only know that i don't want npm install my-module to install a different version of react, or to cause more react somehow to be bundled in the final bundle (but i'm not even sure about that).

What type of dependency (if any) should react be to my-react-component and how would i actually link it to my module?

For example using the externals thing with webpack vs having an actual import React from 'react'?

Build

If i set up my repo to work with the latest and the greatest of JS (or not even JS?), how and what should i publish?

import Foo from 'foo' //<-- where does 'foo' point and what is 'foo'?

Answer 1

What is the high level goal when defining dependencies?

You have to define which dependencies you are using only when developing (devDependencies) and the ones that are needed when someone installs your package and are going to be installed automatic (dependencies), and dependencies you need to be available, but you want the user to install (which, honestly, does not makes sense) peerDependencies.

The difference here is that i don't define the class at runtime, and thus calling import MyModule requires react to be available in MyModule.js?

It would require React to be available where the file is being imported, i.e: A imports myModule, but A has to have react imported. Putting as peer dependencies is the best way here indeed.

For example using the externals thing with webpack vs having an actual import React from 'react'?

Using externals in webpack just tells webpack to not bundle react and says that react will have been imported before the import of this component.

If i set up my repo to work with the latest and the greatest of JS (or not even JS?), how and what should i publish?

Usually the index.js file that contains the library minified/bundled. Publish that with npm, you'll need to setup main field on package.json

import Foo from 'foo' //<-- where does 'foo' point and what is 'foo'?

foo points to the name of the package that you created, i.e: the name this package was publish under. When you go to npmjs.org and search for foo, that is going to be the package. foo is in your node_modules.