使用 Browserify 创建 React Bundle

Question

和here是同一个问题，但我没看懂答案。所以，我的问题是关于答案。

答案是

Your react.js file/module isn't exposing the variables React and ReactDOM you instantiate. In node, you make these methods public by modifying the module.exports object like so:

module.exports = { React: React, ReactDOM: ReactDOM }

最后，我的问题是："you make these methods public"在哪里？

Answer 1

您正在 public 通过在 module.exports 属性上定义这些方法。例如，假设您有一个 reactExports.js 和

的文件

var iWontGetThere = 'I am in this module only';
module.exports = { React: React, ReactDOM: ReactDOM }

现在在另一个文件中，您可以要求这些方法并使用它们，如下所示：

var React = require('reactExports').React;
var SweetComponent = React.createClass({
   render: function() {
     return (
        <div>React is cool and I can use it in here!</div>
     );
   }
});
module.exports = SweetComponent;

现在假设您想在另一个组件中渲染 SweetComponent。如果我没有写 module.exports = SweetComponent，在另一个组件中要求这个模块将没有任何效果，就像您导入一个空对象 {} 一样。假设我尝试 console.log(React.iWontGetThere); 会发生什么？我会得到一个引用错误，因为它没有与 reactExports 的内容一起导出。js-it 仅存在于该模块中，但未公开。

这是一个人为的例子，但这里有趣的故事是引入封装模块的能力。我建议阅读更多关于节点模块的内容 here 并查看 this answer。并举一些例子来掌握它。

tl;dr：定义变量并且没有 module.exports = some_value 语句然后要求相同的文件将默认为空对象。

使用 Browserify 创建 React Bundle

Using Browserify to create React Bundle

reactjs

browserify