CODEWITHSUNDEEP
javascriptnpmwebpack
Mark
Mark

Reputation: 129

How to split a library and its plugins among npm packages?

Im working on a JavaScript library and I want future users to be able to pick and choose the plugins they want to add to their project among with the main library. I'm having few issues with modules and webpack. I'm writing pseudo code to give an idea of how the code is organized.

My index.js for the main library looks like this:

import ClassA from "./classA";
import ClassB from "./classB";

export default class MyLib { 
    .....
}
export { ClassA, ClassB }

I can easily output the library with webpack:

output: {
     path: ...
     filename: 'mylib.min.js',
     library: "MyLib", 
     libraryTarget: "umd"
}

To be able to choose which plugins to add, I'm creating different npm packages (one for each plugin), adding MyLib as an external dependency and then doing:

import {ClassA, ClassB} from "MyLib";


class PluginA extends ClassB {
   constructor() {
      this.test = new ClassA();
   }
}

This works perfectly but, when "compiling" PluginA, webpack would include MyLib in the final js file for PluginA. If I want to include multiple plugins the code would end up with multiple copies of the main lib.

My final goal is to organize the code in such a way that can be easily installed with the following npm commands without having duplicated code everywhere:

npm install MyLib
npm install MyLib-PluginA
npm install MyLib-PluginB

Of course, one obvious solution would be to not use webpack for the plugins but I'd like to keep this option as the last resource in case nothing else works.

Thanks!

Upvotes: 1

Views: 2029

Answers (2)

Mark
Mark

Reputation: 129

Digging into webpack documentation, I've found a solution that uses webpack's externals.

From webpack documentation:

The externals configuration option provides a way of excluding dependencies from the output bundles.

I've just added the following lines to the webpack's configuration for the plugin:

module.exports = {
    ...,
    externals: {
        mylib: { 
            commonjs: 'MyLib',
            commonjs2: 'MyLib',
            amd: 'MyLib',
            root: 'MyLib'
        }
    }
};

Webpack documentation: https://webpack.js.org/configuration/externals/

Hope this will help others.

Upvotes: 1

Jacob
Jacob

Reputation: 78840

I wouldn't recommend using webpack to build your plugins/library. Rather, I'd let the consumer of the library decide on their own bundler. Your best step for the library should just be transpilation (if needed) of any intermediate code like babel-featured JS or TypeScript into something that can be safely require'd by node.

In addition, each plugin ought to have MyLib as a peerDependency instead of a regular dependency. That will make sure that MyLib doesn't get nested inside of the plugin's node_modules and will thus avoid duplicates being bundled. The plugins could in addition has MyLib as a devDependency for the sake of unit tests, but the important bit is that it's never a regular dependency.

Upvotes: 2

Related Questions