使Browserify包与ReactDevTools一起玩得很好 [英] Making Browserify bundle play nice with ReactDevTools
问题描述
React 0.13.3
React 0.13.3
我开始使用 Browserify 组织我的前端反应代码。我也在使用 React Developer Tools Chrome扩展程序用于调试。但是，我遇到了一些非常简单的React代码。
I started using Browserify to organize my frontend React code. I'm also using the React Developer Tools Chrome extension for debugging. However, I'm having trouble with some very simple React code.
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调试器时，麻烦就开始了。我希望它能说出以下内容：
The following code actually works, and "Hello world" renders fine. The trouble starts when I start the React debugger in my console. I would expect it to say the following:
<Top Level>
<App>...</App>
</Top Level>
相反，它只是说：
<Top Level></Top Level>
如何呈现< App> 没有React devtools识别它们？
How can <App> be rendered without the React devtools recognizing them?
推荐答案
似乎人们偶然发现了这件事，并且官方指南未提及此特定症状。在收集到足够的证据之后，最好在此处发布答案，即使此<顶级>< /顶级> 问题可能还有其他原因。
It seems enough people have stumbled upon this matter, and the official guide does not mention this particular symptom. After gathering enough evidence, it is best that an answer is posted here, even if there might be other causes to this <Top Level></Top Level> issue.
如果捆绑中有多个React实例，则React DevTools可能无效。这通常与特定组件中的错误捆绑工具配置（browserify或webpack）有关。 React组件（以及React支持的其他库，如Mixins）应始终在 peerDependency 作为browserify / webpack中的外部。这将使模块的可分发版本不会为自己嵌入React。此外，如果使用React附加组件，则react / addons也可能必须注册为外部依赖项。
The React DevTools may not work if there is more than one instance of React in the bundle. This is often related with an incorrect bundling tool configuration (browserify or webpack) in a particular component. React components (and other libraries supported by React, such as Mixins) should always have react as a peerDependency in npm and as an "external" in browserify/webpack. This will make it so that a distributable version of the module will not embed React for itself. In addition, if React add-ons are used, "react/addons" may also have to be registered as an external dependency.
如果未遵循此规则，仅仅包含需要的模块（或ES6的 import ）将使开发工具无效。当React的另一个实例出现时，那个将自己注册为元素树的源，这就是显示空元素的原因。我在 react-loaders 中追踪了这个错误（问题＃2 ），现在自1.2.3开始修复。 react-google-maps 根据@Carpetfizz的说法，虽然我没有深入研究这个案例。
In cases where this was not followed, the mere inclusion of the module with require (or ES6's import) will render the dev tools useless. When another instance of React emerges, that one will register itself as the source of the element tree, which is why an empty element is shown. I have tracked down this bug in react-loaders (issue #2), and it's now fixed since 1.2.3. The same might have happened to react-google-maps according to what @Carpetfizz said, although I have not looked deeply into this case.
调试这个的一个简单方法是采用准系统模块+网页并迭代添加 require 指令，直到React dev工具停止工作。找到有问题的组件后，提出问题。
One easy trick to debug this is to take a barebones module + web page and iteratively add require instructions until the React dev tools stop working. Once the faulty component is found, file an issue.
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'));
另一个奇特的解决方案是在针对Meteor的React包，其中开发运行时被更改为最后加载React的主实例（ commit ）。
Another peculiar solution was carried out in the React packages for Meteor, where the development runtime was changed to load the main instance of React last (commit).
此主题在问题中解除了＃90 ，这有助于识别更多不合规包裹的情况。
This topic was lifted in issue #90, which helped identify more cases of non-compliant packages.
这篇关于使Browserify包与ReactDevTools一起玩得很好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
