让React开发者工具与Webpack配合使用

Question

我按照这个教程来曝光React作为Webpack的全局变量。已经安装了Expose模块并在配置文件webpack.config.js中添加了模块加载器。但是它不起作用，React开发者工具还是无法使用。

以下是我的webpack.config.js文件，第一个加载器是expose-react：

var path = require ('path'),
    webpack = require ('webpack'),
    htmlWebpackPlugin = require ('html-webpack-plugin');

const PATHS = {
    app : path.join (__dirname, 'app'),
    build : path.join (__dirname, 'build')
};

module.exports = {
    entry : {
        main : PATHS.app + '/Main.jsx'
    },
    output : {
        path : PATHS.build,
        filename : 'dressAphrodite.js'
    },
    module : {
        loaders : [
            {
                test : require.resolve ('react'),
                loader : 'expose?React'
            },
            {
                test : /\.css$/,
                loaders : ['style', 'css'],
                include : PATHS.app
            },
            {
                test : /\.js?$/,
                loader : 'babel-loader',
                include : PATHS.app
            },
            {
                test : /\.jsx?$/,
                loader : 'babel-loader',
                include : PATHS.app
            }
        ]
    },
    debug : true,
    devtool : 'source-map',
    devServer : {
        contentBase : './app',
        progress : true,
        stats : 'errors-only',
    },
    plugins : [
        new htmlWebpackPlugin ({
            title : 'Dress',
            hash : true
        })
    ]
};

仅供参考，以下是我的package.json文件中安装的依赖项：

{
  "name": "dress",
  "version": "1.0.0",
  "description": "",
  "main": "./main.jsx",
  "dependencies": {
    "i": "^0.3.3",
    "npm": "^3.5.2",
    "react": "^0.14.3",
    "react-dom": "^0.14.3"
  },
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "css-loader": "^0.23.1",
    "expose-loader": "^0.7.1",
    "html-webpack-plugin": "^1.7.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC"
}

以下是.babelrc文件的内容：

{
  'presets' : [
    'es2015',
    'react'
   ]
}

- Kayote

Answer 1

实际上有个解决方案，你需要在webpack加上--inline选项启动，在这里可以了解更多信息。这样服务器将位于localhost:8080而不是localhost:8080/webpack-dev-server，热重载仍然可以正常工作，你也能够看到React开发工具。

- Franco Risso

---

谢谢！这个帖子需要更多的点赞。解决了我的问题，我几乎没看到它，因为它被埋得太深了。 - clarkatron

只需访问localhost:8080，不需要/webpack-dev-server部分。在这里，无需对webpack进行任何其他配置即可正常工作。 - Luis Martins

访问时没有使用/webpack-dev-server，页面在更改源代码时将不会自动重新加载。热模块替换（HMR）也将无法工作。最后，“inline”选项已被弃用，并将在下一个主要版本中删除。 - mrbinky3000

Answer 2

我有同样的问题。然而，开发者工具 FAQ 目前说明：“目前无法检查 iframe 和 Chrome 应用/扩展”，而 webpack 在一个 iframe 中运行。

- Johan Svensson

---

谢谢，这正是我在寻找的。但我非常渴望这个功能。 - Jikku Jose

Answer 3

自从React 0.12版本以后，你不再需要将React作为全局变量暴露出来。

重要提示：如果你直接打开html文件而不使用服务器，换句话说，如果你使用file:// URL，你需要允许扩展程序访问这些URL类型：要做到这一点，请前往设置>扩展程序，查找React Developer Tools并勾选“允许访问文件URL”。

当捆绑使用jsx语法编写的React文件时，你需要将文件转换为纯JavaScript。为了做到这一点，你需要使用babel-preset-react，它已经安装好了，但你没有在webpack.config.js中使用它。

你也不需要在webpack.config.js中导入webpack，而且loaders数组中对象的test属性是一个正则表达式，因此/.jsx?$/就足以匹配js或jsx文件。

下面是一个输出React文件包的工作示例（我删除了html-webpack-plugin，所以你需要编写自己的页面）：

webpack.config.js

var path = require ('path');

var PATHS = {
    app : path.join (__dirname, 'app'),
    build : path.join (__dirname, 'build')
};

module.exports = {
    entry : {
        main : PATHS.app + '/main.js'
    },
    output : {
        path : PATHS.build,
        filename : 'bundle.js'
    },
    module : {
        loaders : [
            {
                test : /\.jsx?$/,
                loader : 'babel',
                query: {
                    presets: ['react']
                }
            }
        ]
    }
};

main.js

var React = require('react');
var ReactDOM = require('react-dom');
var Component = require('./component.js');

ReactDOM.render(
  <Component />,
  document.getElementById('test')
);

component.js

var React = require('react');

var Test = React.createClass({
  diplayName: "Test",

  render: function () {
    return (
      <div>Test</div>
    );
  }

});

module.exports = Test;

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>


  </head>
  <body>
    <div id="test"></div>

    <script src="bundle.js"></script>
  </body>
</html>

- Felipe T.

---

感谢您提供详细的答案和更正。我从Webpack文件中删除查询的原因是我在“.babelrc”文件中定义了预设。我将使用“.babelrc”文件更新上述问题。看起来html-webpack-plugin可能与此有关。是的，如果我手动加载React，它会开始运行。 - Kayote

我保留了webpack-html-plugin并采纳了上述建议，但React开发工具仍然无法访问。我还应该提到，我的构建正常工作，我能够编写React并在实时服务器上看到组件输出。 - Kayote

感谢，React Dev Tools for Chrome 版本为 0.14.6.1，Firefox 版本为 0.14.6。这里是__REACT_DEVTOOLS_GLOBAL_HOOK__的输出：_listeners:对象，_relayInternals: (...)，get _relayInternals: 获取()，set _relayInternals: set(relayInternals)，_renderers: 对象，发射：发射(evt、data)，helpers: 对象，inject: 插入(renderer)，nativeMap: 映射()，nativeObjectCreate: create()，nativeSet: 集合()，nativeWeakMap: WeakMap()，off: off(evt、fn)，on: on(evt、fn)，sub: sub(evt、fn)，__proto__: 对象。 - Kayote

谢谢。然而，React 在 Chrome 和 Firefox 中都不能识别，所以我很奇怪。控制台没有报错，除了在 Firefox Dev 版本中它指出：“当页面正在加载时，到 ws://localhost:8080/sockjs-node/829/t0n1kw15/websocket 的连接被中断了。”。 - Kayote

你解决了吗？我也遇到了同样的问题。 - larsw