如何捆綁模塊而不依賴於發布npm包

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

如果要構建庫，則需要將這些依賴項注冊為外部 。

總而言之，只需在webpack配置中添加externals屬性，並將其設置為包含要排除的模塊的名稱（字符串）的數組。

更復雜的情況可能需要您指定如何在導入系統的功能中導入依賴項。 您可以使用對象實現此目的。

這是官方的例子 ：

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

有關庫和外部的更多信息，請參見此處 。

如果您使用的是ES 2015和babel 6，您可能會遇到一個問題，即導出庫是模塊對象而不是您想要的（例如您的組件）。 看看這個問題來解決它。

Answer 2

也許您應該使用peerDependencies 。 然后你可以構建沒有webpack進行發布。 如果你使用ES6，你所需要的只是一個babel蒸騰步驟。

這樣的事情經常就足夠了

babel ./src -d ./lib

對等依賴項將讓npm知道使用您的包的項目應該安裝這些依賴項。