使用Bower與Webpack - React

Question

作為前言，我知道我應該避免使用Bower，而是使用NPM來管理我的所有JavaScript依賴項。 但是，我正在使用一些大量使用Bower的遺留代碼，直到我可以將所有內容移到NPM上，我想用Bower和Webpack獲得我的代碼庫的工作版本。

話雖這么說，我正在遵循官方指南中使用Bower與Webpack的配置設置： https ：//webpack.github.io/docs/usage-with-bower.html

特別是，我已經設置了一個Github倉庫，我可以在其中bower install jquery並使用官方指南中的配置，我能夠在我的源代碼中require("jquery")並讓它與Webpack一起工作。 鑒於這適用於jQuery，我認為它適用於其他bower包，包括React。

但是，在運行bower install react ，我試圖在我的源代碼中require("react")但是Webpack引發了一個錯誤，說Module not found: Error: Cannot resolve module 'react' in /Users/wmock/Desktop/using-bower-with-webpack/src 。

這是我的Github回購： https ： //github.com/fay-jai/Using-Bower-Through-Webpack

我有3個分支：

1. “jquery-working”分支遵循官方指南中的配置，並使用通過Bower安裝的jQuery。
2. “jquery-react-not-working”分支與上面的配置相同，但是通過Bower安裝了React。 這不起作用。
3. “master”分支具有通過Bower安裝的jQuery和React的工作版本，但它不遵循官方Webpack文檔中指定的配置設置。

題：

1. 有沒有辦法讓“jquery-react-not-working”分支起作用？ 換句話說，有沒有辦法遵循官方文檔，像React一樣使用像Webpack一樣的bower包？
2. 使用“master”分支中指定的方法有什么缺點嗎？ 這應該是更好的方式使用Bower與Webpack？

編輯（2016年4月4日）：

1. 似乎DirectoryDe​​scriptionFilePlugin無法處理文件名數組，這就是為什么“jquery-react-not-working”分支不起作用的原因。
2. 我很想聽到第二個問題的更多答案，但我的直覺告訴我，使用“master”分支中指定的方法並不理想，因為：a）你必須手動為每個庫設置別名b）你可能遇到如果多個庫也使用相同的底層庫，則會發生沖突。

Answer 1

jquery-react-not-working branch - DirectoryDe​​scriptionFilePlugin

DirectoryDe​​scriptionFilePlugin無法處理文件名數組，因此無法導入React和ReactDOM。 您可以使用像Bower Webpack Plugin這樣的插件來解決陣列問題，但它只導入數組中的第一個文件，而忽略其余的文件，因此可以導入React，但ReactDOM不能。

---

master branch - 手動別名

自己對文件進行別名將始終有效。 主要缺點是您需要手動為每個bower依賴項添加別名。

resolve: {
    alias: {
        "jquery": bower_dir + "/jquery/dist/jquery.js",
        "react": bower_dir + "/react/react.js",
        "react-dom": bower_dir + "/react/react-dom.js" // added alias for react-dom
    }
}

---

結合

您實際上可以將DirectoryDe​​scriptionFilePlugin解析與通過別名手動解析相結合。 正常的模塊，如jQuery將以官方方式解析，多文件模塊可以別名：

resolve: {
    modulesDirectories: ["node_modules", "bower_components"],
    alias: {
        "react": bower_dir + "/react/react.js",
        "react-dom": bower_dir + "/react/react-dom.js"
    }
},
plugins: [
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", ["main"])
    )
]

Answer 2

這是一個問題，因為該示例使用反應版本0.10.0，但從版本0.14.0反應作為兩個包發貨。 在react包的.bower.json配置中， main屬性是一個數組，似乎webpack不喜歡它。

不幸的是，以下問題概述了沒有這樣的修復，但插件可能有效：將main域解析為Bower＃4的數組

但是，在該問題的深處，我設法找到了一種修改webpack.config.js的方法 ，其中第22行可以從以下位置更改：

...DirectoryDescriptionFilePlugin(".bower.json", ["main"])

至：

...DirectoryDescriptionFilePlugin(".bower.json", ["main", ["main", 0]])

然后它將解析字符串main和數組main ，但只解析第一個組件。 我不知道是否可以使用該插件遍歷所有數組條目，但它比編寫自己的稍微容易一些。 您無法向陣列添加額外的解析器（例如，要解析react-dom）：

... DirectoryDe​​scriptionFilePlugin（“。bower.json”，[“main”，[“main”，0]，[“main”，1]]）

因此，如果您需要react-dom包，那么您可能需要找到另一種方法來實現它。