在 Webpack 中使用 Bower - 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 一起使用？
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 以两个包的形式提供。在 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 包，那么你可能需要找到另一种方法来实现它。