javascript - 将 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发现:错误:无法解析/Users/wmock/Desktop/using-bower-with-webpack/src 中的模块“ react ”。

这是我的 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 这样的 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"])
    )
]