I am currently developing a JavaScript library that allows users to select specific plugins to add to their project along with the main library. However, I am facing some challenges with modules and webpack. To illustrate how the code is structured, I am writing pseudo code.
Here is an excerpt from my index.js file for the main library:
import ClassA from "./classA";
import ClassB from "./classB";
export default class MyLib {
.....
}
export { ClassA, ClassB }
Successfully outputting the library with webpack:
output: {
path: ...
filename: 'mylib.min.js',
library: "MyLib",
libraryTarget: "umd"
}
To allow users to choose which plugins to incorporate, I am creating individual npm packages for each plugin, making MyLib an external dependency, and then implementing:
import {ClassA, ClassB} from "MyLib";
class PluginA extends ClassB {
constructor() {
this.test = new ClassA();
}
}
Although this approach works well, compiling PluginA with webpack ends up including MyLib in the final js file for PluginA. If multiple plugins are added, the main lib will be duplicated in the code.
My ultimate objective is to structure the code in a way that makes it easy to install using the following npm commands without redundant code:
npm install MyLib
npm install MyLib-PluginA
npm install MyLib-PluginB
While one solution could be to avoid using webpack for the plugins altogether, I prefer to keep this option as a last resort if all else fails.
Thank you!