浏览器与插件对独立组件做出react,可由插件使用

IT技术 node.js reactjs browserify
2021-05-13 17:48:11

我正在尝试使用 react 和 browserify 并有以下愿望:

  • 我想把我写的所有代码打包成一个文件
  • 我想将所有 3rd 方依赖项(react、react-router、lodash 等)捆绑到单独的文件中,每个库一个,以最大化缓存的可能性

我已经设法做上述的事情,但我遇到了这种特殊情况:

在对使用我的代码一些地方我想与插件react,因此需要这样的:var React = require('react/addons)我没有在我的代码的所有部分都这样做,也没有在 3rd 方依赖项中完成,例如 react-router。这似乎造成了冲突。浏览器化的包只能通过var React = require('react/addons)它打破 3rd 方的依赖关系,或者我将不得不在有或没有插件的情况下捆绑react,这些react被捆绑和下载两次。

我尝试使用aliasify为其创建react别名,react/addons但无法使其正常工作。这应该可能吗?

另一个可接受的解决方案是将插件捆绑在一个单独的捆绑包中,reactreact/addons通过调用require. 这有可能吗?

添加 作为对 BrandonTilley 的第一条评论的评论,这不仅适用于 React 和插件。Lodash 还附带了许多不同的发行版,在这种情况下,我也希望能够选择要在我的 web 应用程序中使用的版本。

3个回答

请注意,此处记录了您想要实现的目标:Browserify partitionning

我将我的应用程序分为两部分:appLibs.jsapp.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使用reactreact/addons

如果你真的想把你的库捆绑在单独的文件中,然后用 捆绑b.require("myLib"),但在这种情况下,一定要检查这些库没有直接的依赖关系。如果要捆绑的 lib 在 React 中具有依赖性,则这意味着该 lib 将被打包在捆绑包中,这可能会导致多个捆绑包中包含 React(并在运行时出现奇怪的故障)。该库应该使用,peerDependencies以便b.require不尝试打包这些依赖项

听起来像是factor-bundle.

browserify 手册

factor-bundle 基于入口点将 browserify 输出拆分为多个捆绑目标。对于每个入口点,都会构建一个特定于入口的输出文件。两个或多个入口文件需要的文件被分解成一个公共包。

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

  1. Browserify 将react/插件添加到它自己的文件中
  2. 创建我自己的文件(称为 shim),仅包含以下内容: module.exports = require('react/addons');
  3. 浏览我的 shim 并使用公开选项,将其公开为react

现在,如果需要react或react/插件,我会得到react/插件