使用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 分支 - 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"])
    )
]