将Bower与Webpack结合使用-React

Question

首先，我知道我可能应该避免使用Bower，而是使用NPM来管理我的所有JavaScript依赖项。然而，我正在处理一些大量使用Bower的遗留代码，在我能够将所有内容转移到NPM之前，我希望使用Bower和Webpack获得我的代码库的工作版本。

话虽如此，我遵循官方指南中使用Bower with Webpack的配置设置：https://webpack.github.io/docs/usage-with-bower.html

特别是，我建立了一个Github repo，在那里我可以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

我有三个分支机构：

1. "jquery working"分支遵循官方指南中的配置，并通过Bower安装jquery
2. "jquery react not working"分支的配置与上述相同，但react是通过Bower安装的这行不通
3. "master"分支通过Bower安装了jQuery和React的工作版本，但它没有遵循官方Webpack文档中指定的配置设置

问题：

1. 有没有办法让"jquery react not working"分支工作？换句话说，有没有一种方法可以遵循官方文档，让React这样的bower包与Webpack一起使用
2. 使用"master"分支中指定的方法有什么缺点吗？这是否应该是将Bower与Webpack一起使用的首选方式

编辑（2016年4月12日）：

1. DirectoryDescriptionFilePlugin似乎无法处理文件名数组，这就是"jquery react not working"分支不起作用的原因
2. 我很想听到更多关于第二个问题的答案，但我的直觉告诉我，使用"主"分支中指定的方法并不理想，因为：a）你必须手动别名每个库，b）如果多个库也使用相同的底层库，你可能会遇到版本冲突

Answer 1

jquery react不工作分支-DirectoryDescriptionFilePlugin

DirectoryDescriptionFilePlugin无法处理文件名数组，因此无法导入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
    }
}

---

联合收割机

实际上，您可以将DirectoryDescriptionFilePlugin解析与通过别名手动解析相结合。普通模块，如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似乎不喜欢这样。

不幸的是，以下问题概述了没有这样的修复，但插件可能会起作用：将main字段解析为Bower#4 的数组

然而，在这个问题的深处，我设法找到了一种修改webpack.config.js的方法，其中第22行可以从更改

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

至：

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

然后它将解析字符串main和数组main，但仅解析第一个组件。我不知道是否可以使用该插件循环所有数组条目，但它比编写自己的插件稍微容易一些

您不能向数组添加额外的解析器（例如解析react dom）：

。。。DirectoryDescriptionFilePlugin（".bower.json"，["main"，["main"，0]，["main"，1]]）

因此，如果您需要react-dom包，那么您可能需要找到另一种方法。