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

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

我正在使用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，但我想将此选项保留为最后一个资源，以防其他任何事情起作用。

谢谢！

解决方法

我不建议使用webpack构建您的插件/库。相反，我会让图书馆的使用者决定他们自己的捆扎机。对于该库，最好的步骤应该只是将任何中间代码（如babel功能的JS或TypeScript）（如果需要）转译为可以由节点安全地require插入的内容。

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

,

深入研究webpack文档，我发现了一个使用webpack外部组件的解决方案。

从webpack文档中：

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

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

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

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

希望这对其他人有帮助。