使用Browserify創建React包

Question

這與here的問題相同，但我不明白答案。所以，我的問題是關於答案。

答案是你實例

你react.js文件/模塊未暴露變量反應， ReactDOM。在節點上，你讓這些方法公衆對 修改module.exports對象，像這樣：

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

最後，我的問題是：哪裏？「你讓這些方法公衆」？

Answer 1

您正在通過在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的內容一起導出 - 它只存在於該模塊中，但未公開。

這是一個人爲的例子，但這裏有趣的故事是能夠引入封裝模塊。我建議閱讀更多關於節點模塊here 和檢查出this answer以及。 並製作一些示例以獲取它的掛起。

tl; dr：定義變量並且沒有module.exports = some_value語句，則需要相同的文件將默認爲空對象。