Question

我正在使用react和browserify进行一些尝试并且有这些愿望：

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

我已经成功完成了上述事情，但我遇到了这种特殊情况：

在我的代码的某些地方，我想使用与插件的反应，因此需要像这样：var React = require('react/addons)。我不会在我的代码的所有部分中执行此操作，并且不会在第三方依赖项（例如react-router）中执行此操作。这似乎造成了冲突。浏览器化的捆绑包只能通过var React = require('react/addons)获得，这会破坏第三方的依赖关系，或者我将不得不捆绑反应，无论是否有插件，反应的menas捆绑并下载两次。

我尝试使用aliasify并将react设为react/addons的别名，但我无法使其正常工作。这可能吗？

另一个可接受的解决方案是将只是插件捆绑在一个单独的捆绑包中，并通过调用react来使react/addons和require可用。这有可能吗？

加成作为BrandonTilley对第一条评论的评论，这不仅适用于React和插件。 Lodash还附带了许多不同的发行版，我希望能够选择在我的webapp中使用的版本。

Answer 1

请注意，您希望实现的目标在此处记录：Browserify partitionning

我将我的应用分为两部分：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内可以使用

如果您真的想将libs捆绑在单独的文件中，请使用b.require("myLib")捆绑，但在这种情况下，请确保检查库是否没有直接依赖关系。如果lib to bundle在React中具有依赖关系，这意味着lib将打包在bundle中，可能导致多个bundle在其中包含React（并在运行时发生奇怪的失败）。该库应该使用peerDependencies，以便b.require不会尝试打包这些依赖项

Answer 2

听起来像是factor-bundle的完美用例。

来自browserify handbook：

factor-bundle将基于入口点的浏览器输出分成多个束目标。对于每个入口点，都会构建特定于条目的输出文件。两个或多个条目文件所需的文件会被分解为一个公共包。

Answer 3

感谢所有建议，但我选择的解决方案是“垫片”，如果这是正确的术语。看起来像这样：

Browserify react / addons到它自己的文件
创建我自己的文件（称为shim），仅包含：module.exports = require('react/addons');
浏览我的垫片并使用公开选项，将其公开为反应

现在，如果需要反应或反应/插件，我会得到反应/插件

浏览器可以将插件与插件的插件一起使用

3 个答案: