让React开发人员工具与Webpack一起工作

Getting React Developer Tools to Work with Webpack

本文关键字：Webpack 一起 工作 工具 React 开发      更新时间：2023-09-26

我遵循本教程在Webpack中将React公开为全局。安装了CCD_ 1模块；我在config-webpack.config.js文件中添加了模块加载程序。然而，它不起作用&React Developer Tools仍然无法访问。

这是我的webpack.config.js文件，第一个加载程序是expose-reflect:

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'
   ]
}

实际上有一个解决方案，您必须在此处使用--inline选项启动webpack，因此服务器将位于localhost:8080，而不是localhost:8080/webpack-dev-server，热重新加载仍然有效，您将能够看到您的反应开发工具：D

我也有同样的问题。然而，devtools常见问题解答目前指出"当前iframe和Chrome应用程序/扩展程序不可检查"，并且webpack在iframe中运行。

由于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，loader数组内对象中的test属性是一个正则表达式，因此/.jsx？$/足以匹配js或jsx文件。

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

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>
相关文章：