node.js - 如何在 Node 和 react 之间共享代码？

Question

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

现在假设我有一个组件:

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

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

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

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

这样在 browserify 中忽略 React

browserify -i React

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

var React = require('React');

会导致错误“undefined is not a function”

知道如何避免这种情况吗？

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>