Question

我在服务器渲染上使用React，因此需要在节点和客户端使用反应代码，在客户端我使用browserify。

现在假设我有一个组件：

var item = React.createClass({
    //code here
})

为了在节点中使用这个组件，我必须先要求React，所以组件将是

var React = require('React');
var item = React.createClass({
    //code here
})

但如果我通过browserify在客户端中使用此组件，则需要React librray，在这种情况下，我的build js文件将太大。我知道我可以在浏览器中忽略React，如

browserify -i React

但是如果我忽略了React那么代码：

var React = require('React');

会导致错误＆＃34; undefined不是函数＆＃34;

任何想法如何避免这种情况？

Answer 1

您可以将供应商包放在一个单独的包中：

browserify -r react -r underscore > vendor.js

然后声明这些依赖项将由外部包（或多个）提供：

browserify -x react -x underscore main.js > bundle.js

并在您的页面中包含两者：

<script src="vendor.js"></script>
<script src="bundle.js"></script>

在构建主捆绑包时，您不需要重建供应商捆绑包（除非您已升级依赖项）。通常你实际上并不需要这样做，如果你担心开发中的构建时间：watchify是一个很好的替代/补充。

当某些内容为-r时，您也可以在普通脚本代码中使用它。这意味着现在有一个require global，它可能与页面上的其他脚本冲突。

<script>
    var React = require('react');
</script>

Answer 2

如果您已通过单独的<script>标记添加了React，请使用browserify-shim转换重写require('react')调用以使用全局React变量。

将以下配置添加到package.json：

"browserify-shim": {
  "react": "global:React"
}

捆绑时使用转换：

browserify -t browserify-shim lib/index.js -o build/index.js

捆绑版本应该如下所示：

var React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);

或者，您可以通过向-t browserify-shim

添加一些browserify转换配置来省略package.json参数的必要性

"browserify": {
  "transform": [ "browserify-shim" ]
}