将 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" 分支有一个适用于 jQuery 和通过 Bower 安装的 React 的工作版本，但它不遵循官方 Webpack 文档中指定的配置设置。

问题：

1. 有没有办法让 "jquery-react-not-working" 分支工作？换句话说，有没有办法按照官方文档让像 React 这样的 bower 包与 Webpack 一起工作？
2. 使用 "master" 分支中指定的方法有什么缺点吗？这应该是将 Bower 与 Webpack 结合使用的更优选方式吗？

编辑（2016 年 4 月 12 日）：

1. 似乎 DirectoryDe​​scriptionFilePlugin 无法处理文件名数组，这就是 "jquery-react-not-working" 分支不起作用的原因。
2. 我很想听到更多有关我的第二个问题的答案，但我的直觉告诉我，使用 "master" 分支中指定的方法并不理想，因为：a) 您必须手动为每个库添加别名b) 如果多个库也使用相同的底层库，您可能 运行 会发生版本冲突。

Answer 1

jquery-react-not-working 分支 - DirectoryDe​​scriptionFilePlugin

DirectoryDe​​scriptionFilePlugin 无法处理文件名数组，因此您无法导入 React 和 ReactDOM。可以使用Bower Webpack Plugin这样的插件来解决数组问题，但是它只会导入数组中的第一个文件，而忽略其余的，所以React可以导入，但ReactDOM不能。

---

master 分支 - 手动别名

自己给文件加上别名总是可行的。主要缺点是您需要手动为每个 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

这是一个问题，因为该示例使用的是 React 版本 0.10.0，但从版本 0.14.0 开始，React 作为两个包提供。在反应包的 .bower.json 配置中， main 属性 是一个数组，webpack 似乎没有我不喜欢。

不幸的是，以下问题概述了没有这样的修复，但插件可能会起作用：Resolve main field as array for 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包，那么你可能需要另辟蹊径。