如何在npm包中拆分库及其插件？

Question

我正在开发一个JavaScript库，我希望未来的用户能够在主库中选择并选择他们想要添加到他们的项目中的插件。我对模组和webpack没什么意见。我正在编写伪代码，以了解代码是如何组织的。

主库的index.js如下所示：

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

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

我可以很容易地和webpack一起输出图书馆：

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

为了能够选择要添加的插件，我正在创建不同的npm包(每个插件一个)，将MyLib作为外部依赖项添加，然后执行以下操作：

import {ClassA, ClassB} from "MyLib";


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

这很好，但是，当“编译”PluginA时，webpack将MyLib包含在PluginA的最终js文件中。如果我想包含多个插件，那么代码最终将得到多个主库的副本。

我的最终目标是以这样一种方式来组织代码，这样就可以轻松地安装以下npm命令，而不必到处重复代码：

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

当然，一个明显的解决方案是不使用webpack的插件，但我想保留这个选项作为最后的资源，以防其他任何工作。

谢谢!

Answer 1

深入研究webpack的文档，我找到了一个解决方案，它使用webpack的外部元素。

webpack的文件：

外部配置选项提供了一种从输出包中排除依赖项的方法。

我刚刚在webpack的插件配置中添加了以下几行：

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

Webpack文档：https://webpack.js.org/configuration/externals/

希望这能帮到别人。

Answer 2

我不建议使用webpack来构建插件/库。相反，我会让图书馆的消费者决定他们自己的包。对于库来说，最好的步骤应该是将任何中间代码(如babel功能的JS或TypeScript )转换为可以通过节点安全地进行required的转换。

此外，每个插件都应该使用MyLib作为peerDependency，而不是常规的依赖项。这将确保MyLib不会嵌套在插件的node_modules中，从而避免重复绑定。此外，为了进行单元测试，插件还可以将MyLib作为devDependency，但重要的一点是，它从来不是常规的dependency。