Question

最近，我开发了一个React组件并希望发布它。

在这个包中，

"dependencies": {
  "react": "^0.14.6",
  "react-dom": "^0.14.6",
  "react-timer-mixin": "^0.13.3"
}

当我通过webpack命令构建包时，我将获得一个包含react, react-dom and react-timer-mixin的包。
这种做法似乎不对......

因此，我的问题是如何构建没有依赖关系的包进行发布。

*我认为分离主bundle和依赖关系的chuck-vendor方法是针对多个bundle文件的。但我的要求是构建lib。

Answer 1

如果要构建库，则需要将这些依赖项注册为externals。

总而言之，只需在webpack配置中添加externals属性，并将其设置为包含要排除的模块的名称（字符串）的数组。

更复杂的情况可能要求您指定如何在导入系统的功能中导入依赖项。您可以使用对象来实现此目的。

Here is the official example：

module.exports = {
    output: {
        libraryTarget: "umd"
    },
    externals: [
        "add",
        {
            "subtract": {
                root: "subtract",
                commonjs2: "./subtract",
                commonjs: ["./math", "subtract"],
                amd: "subtract"
            }
        }
    ]
}

See here for more information about library and externals

如果您使用的是ES 2015和babel 6，则可能会遇到导出库的问题，而不是您想要的模块对象（例如您的组件）。 Have a look at this question解决它。

Answer 2

也许您应该使用peerDependencies代替。然后你可以构建没有webpack进行发布。如果你使用ES6，你所需要的只是一个babel蒸腾步骤。

这样的事情通常就足够了

babel ./src -d ./lib

对等依赖项将让npm知道使用您的包的项目应该安装这些依赖项。

如何捆绑模块而不依赖于发布npm包

2 个答案: