Installing npm packages via jspm with dependencies

Question

I understand that I can install npm packages with jspm by running: jspm install npm:<pkg-name> and this will allow me to use it in development (e.g. within my JS file: import myPackage from 'myPackage';).

If the package.json file of the npm package contains dependencies, I would like it to install those too within the package. So within that package folder, I would expect a node_modules folder with packages. However, when I run the command to install the npm package, it does not install the node_modules and I would have to manually go to the folder and run npm install for these to appear. This means I cannot reference the other files/dependencies within the package itself without manually running this command. Is there anything I can run via jspm to ensure these install?

score 1 · Answer 1 · answered Aug 16 '16 at 08:07

No you cannot do the currently in JSPM and I believe JSPM doesn't really resolve NPM packages yet. I think there is work on this but not available as I speak.

What I suggest is you take a look at is the following maven plugin:

Front end plugin

We have used this in several projects and it allows you run several different installation flavours so that you can bind your project together.

You will need to install maven 3 from here:

Maven download

You will then need a basic pom.xml to run jspm install as well as a npm install. You can then run your Karma tests and compile from this set-up too.

From the docs:

<execution>
    <id>jspm install</id>
    <goals>
        <goal>jspm</goal>
    </goals>

    <configuration>
        <!-- optional: The default argument is actually
        "install", so unless you need to run some other jspm command,
        you can remove this whole <configuration> section.
        -->
        <arguments>install</arguments>
    </configuration>
</execution>

Will start the jspm install and finally:

<execution>
    <id>npm install</id>
    <goals>
        <goal>npm</goal>
    </goals>

    <!-- optional: default phase is "generate-resources" -->
    <phase>generate-resources</phase>

    <configuration>
        <!-- optional: The default argument is actually
        "install", so unless you need to run some other npm command,
        you can remove this whole <configuration> section.
        -->
        <arguments>install</arguments>
    </configuration>
</execution>

Will provide you with the npm install. This will install everything for you and provide you with an all in one stop shop for your environment. We've been using this tool for a while now and it has always been found to be reliable, flexible and binds the various tooling together - it is also well supported.

score 1 · Answer 2 · answered Mar 24 '17 at 13:01

Here is a list of command you can run :

jspm install npm:myDependency
jspm install --no-optionnal
jspm install github:authorGithubAccount/myDependency
npm install myDependency

Some dependency are available on both, but not always and not in the same structure. Though jspm can handle node.js module system. Maybe the dependencie you try to add has no node_modules.

sultan · Answer 3 · 2020-01-10T00:46:54.103

✌ An alternative

As alternative I can suggest dynamic-cdn-webpack-plugin, the trick is on development environment you will have node_modules folder in your project, and for production it will inject the dependency from cdn servers.

Advantages

You will get the cache benefits.
Small bundle size, because it will contain only application code.

Disadvantages

It works only with webpack.

As an example you can check this project.

Installing npm packages via jspm with dependencies

3 Answers3