使用 Browserify 创建 React Bundle
Using Browserify to create React Bundle
和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"在哪里?
您正在 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
语句然后要求相同的文件将默认为空对象。
和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"在哪里?
您正在 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
语句然后要求相同的文件将默认为空对象。