製作Browserify捆綁玩ReactDevTools不錯

陣營0.13.3製作Browserify捆綁玩ReactDevTools不錯

我開始使用Browserify組織我的前端代碼作出反應。我還使用Chrome擴展程序React Developer Tools進行調試。但是，我遇到了一些非常簡單的React代碼問題。

var React = require('react/addons'); 

//React DEV-TOOLS requires React to be on the global scope. Scope is hidden when bundling 
window.React = React; 

var App = React.createClass({ 
    render: function(){ 
     return (
      <div> 
       <p>Hello world</p> <!-- Renders fine --> 
      </div> 
     ) 
    } 
}); 

React.render(
    <App />, 
    document.getElementById('content') 
);

下面的代碼實際上有效，「Hello world」呈現正常。當我在控制檯中啓動React調試器時，麻煩就開始了。我希望它說以下內容：

<Top Level> 
    <App>...</App> 
</Top Level>

但是，相反，它只是說：

<Top Level></Top Level>

如何<App>沒有認識到他們的陣營devtools呈現？

來源

2015-05-14 Carpetfizz

我也在尋求解決這個問題的方法。即使在browserify級別暴露「react」，也可能不會觸發React選項卡或僅顯示「Top Level」。你使用的是什麼版本的React？ –

@ E_net4，我正在使用最新的 – Carpetfizz

，請把實際版本放在問題中。 –

似乎有足夠的人偶然發現此事，official guide沒有提到這種特殊的症狀。收集足夠的證據後，最好在這裏發佈答案，即使這個<Top Level></Top Level>問題可能存在其他原因。

如果包中有多個React實例，則React DevTools可能無法正常工作。這通常與特定組件中不正確的綁定工具配置（browserify或webpack）有關。 React組件（以及React支持的其他庫，例如Mixins）應始終將react設置爲peerDependency（以npm爲單位），並作爲browserify/webpack中的「外部」。這將使得模塊的可分發版本不會爲自己嵌入React。另外，如果使用React附加組件，「react/addons」也可能必須註冊爲外部依賴項。

如果沒有遵循這種情況，僅僅包含require（或ES6的import）模塊將導致開發工具無用。當React的另一個實例出現時，該實例將註冊爲元素樹的源，這就是爲什麼顯示一個空元素的原因。我在react-loaders（issue #2）中追蹤了這個bug，現在它已經從1.2.3開始修復。根據@Carpetfizz的說法，react-google-maps可能也發生了同樣的情況，儘管我沒有深入研究這種情況。

一個簡單的技巧就是調試一下準系統模塊+網頁，並反覆添加require指令，直到React開發工具停止工作。一旦發現有問題的組件，請提出問題。

var React = require('react'); 
var Loader = require('react-loaders'); // testing react-loaders 

var App = React.createClass({ 
    render: function(){ 
     return (
      <div> 
       <p>Check the React tab!</p> 
      </div> 
     ) 
    } 
}); 

React.render(<App />, document.getElementById('container'));

另一個特有的溶液在React packages for Meteor，其中發展運行時改變爲加載的主要實例進行陣營最後（commit）。

本主題已在問題#90中解除，這有助於識別更多不符合規範的軟件包。

來源

2015-06-22 23:09:38

我可以證實這也是我的情況所導致的問題，react-intl將反應0.14的beta版本導入到我的webpack包中，除了0.13之外。一旦我更新了它的package.json來指定react作爲peerDependency，並且從其node_modules目錄中刪除了反應，重新進行了webpackages，開發工具又開始工作了 – crafterm

製作Browserify捆綁玩ReactDevTools不錯

回答

相關問題