Node.js Browserizing使用插件将其转换为独立组件，可供插件使用

我对react和browserify有一点体验，并有以下愿望：

• 我想将我编写的所有代码捆绑到一个文件中
• 我想将所有第三方依赖项（react、react router、lodash等）捆绑到单独的文件中，每个库对应一个文件，以最大化缓存的可能性

我已成功完成上述工作，但遇到了以下具体情况：

在我的代码的某些地方，我想将react与插件一起使用，因此需要这样做：

var react=require（'react/addons）

。我没有在代码的所有部分都这样做，也没有在第三方依赖项（如react router）中这样做。这似乎造成了冲突。browserified bundle只能通过

var React=require（'React/addons）

提供，这会破坏第三方的依赖关系，或者我必须将React与或不与addons捆绑在一起，React的mena会捆绑并下载两次

我试图使用并使

react

成为

react/addons

的别名，但无法正常工作。这可能吗

另一个可接受的解决方案是将插件捆绑在一个单独的捆绑包中，并通过调用

require

使

react

和

react/addons

都可用。这有可能吗

添加

---

作为对BrandonTilley第一条评论的评论，这不仅仅适用于React和Add。Lodash还附带了许多不同的发行版，我希望在这种情况下也能选择在我的webapp中使用的版本。

听起来像是

因子包的完美用例

从：

factor bundle根据入口点将browserify输出拆分为多个捆绑目标。对于每个入口点，将构建一个特定于入口的输出文件。两个或多个条目文件所需的文件被分解成一个公共包

请注意，此处记录了您想要实现的目标：

我将我的应用程序打包为两部分：
appLibs.js
和
app.js
。
我也为缓存做过这项工作，但我选择将所有不经常更改的代码放在一个包中，而不是像您希望的那样拆分它，但您可以使用相同的技巧

以下是您可能感兴趣的代码：

var libs = [
    "react",
    "react/addons", // See why: https://github.com/substack/node-browserify/issues/1161
    ... other libs
];

gulp.task('browserify-libs', function () {
    var b = browserify(...);
    libs.forEach(function(lib) {
        b.require(lib);
    });
    return b.bundle().......
});
gulp.task('browserify',['browserify-libs'],function () {
    var b = browserify(...);
    libs.forEach(function(lib) {
        b.external(lib);
    });
    return b.bundle().......
});

这样，React只在
appLibs.js
中捆绑一次，并且可以在
app.js
中使用
React
和
React/addons

如果您确实想将lib绑定到单独的文件中，请使用
b.require（“myLib”）
进行绑定，但在这种情况下，请确保检查库是否没有直接依赖关系。如果一个lib-to-bundle在React中有依赖项，这意味着lib将被打包在bundle中，这可能导致多个bundle在其中进行React（并在运行时出现奇怪的故障）。库应该使用
peerDependencies
，这样
b.require
就不会试图打包这些依赖项了
谢谢大家的建议，但如果这是正确的术语，我选择的解决方案是“垫片”。看起来像这样：

将react/addons浏览到自己的文件中
创建我自己的文件（称为shim），仅包含以下内容：
module.exports=require（'react/addons'）

浏览我的填隙片并使用expose选项，将其显示为react
现在，如果需要react或react/addons，我会得到react/addons
您可以尝试查看这个包：@BrandonTilley我已经看到了。很快，我看到它被弃用了，回来删除了我的评论，但你比我抢先一步：）你可以通过
require（“react/lib/ReactComponentWithPureRenderMixin”）
看看网页，它比browserify更简单…）我不确定这是我要的。Factor bundle分离我的文件，然后将所有其他内容合并到一个公共包中，对吗？这不正是我想要的吗？=）是的，但如果我理解正确，您有多个共享某些模块的页面。您可以将包含每个页面入口点的所有模块移交给factor bundle，而common bundle包含共享模块。否。我没有多个共享模块的页面。我有一页。我希望所有第三方依赖项都被分割成几个文件，这些文件可以被浏览器缓存。当一个依赖项发生更改时，浏览器只需下载该更改，而无需下载其他内容。请查看我的答案或更好的解决方案，阅读“我需要grunt browserify”之类的内容。你知道那会是什么样子吗？