Browserifying反应与附加到一个独立的组件,可用插件

我有点反应和浏览,并有这些愿望:

  • 我想将我写的所有代码捆绑到一个文件中
  • 我想捆绑所有第三方的依赖(反应,反应路由器,lodash等)到单独的文件,每个lib一个,以最大限度地caching可能性

我设法做了上述的事情,但我遇到了这样的具体情况:

在我的代码的一些地方,我想使用附加的反应,因此需要这样的: var React = require('react/addons) 。 我不在我的代码的所有部分这样做,它不是在第三方依赖,如react-router。 这似乎造成了冲突。 或者browserified bundle只能通过var React = require('react/addons)来打破第三方的依赖关系,否则我将不得不捆绑包含或不包含addons的反应捆绑和下载两次。

我试图使用别名,并作出react react/addons的别名,但我不能使它的工作。 这应该是可能的吗?

另一个可以接受的解决scheme是将附加组件捆绑在一个单独的捆绑包中,并通过这个组合使得这两个react/addons可以通过调用来reactreact/addons 。 这有可能吗?

补充作为对BrandonTilley的第一条评论的评论,这不仅仅适用于React和插件。 Lodash也有许多不同的发行版本,我希望能够在这种情况下select在我的webapp中使用的版本。

Solutions Collecting From Web of "Browserifying反应与附加到一个独立的组件,可用插件"

请注意,您要实现的内容在此处进行了介绍: Browserify分区

我打包我的应用程序在两个部分: appLibs.jsappLibs.js 我也这样做了caching,但我select将所有不经常更改的代码放在一个包中,而不是像想要的那样拆分它,但是可以使用相同的技巧。

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

 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的bundle(并在运行时出现奇怪的故障)。 该库应该使用peerDependencies以便b.require不会尝试打包这些依赖关系

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

从browserify手册 :

因子束分裂根据入口点将输出分成多个束目标。 对于每个入口点,build立一个入口特定的输出文件。 将两个或多个入口文件所需的文件分解成一个通用包。

感谢所有的build议,但我select的解决scheme是“垫片”,如果这是正确的术语。 看起来像这样:

  1. Browserify反应/插件到它自己的文件
  2. 创build我自己的文件(称为shim)只包含这个: module.exports = require('react/addons');
  3. 浏览我的垫片,并使用揭露选项,暴露它的反应

现在,要么反应或反应/插件是必要的我得到反应/插件