craco+react-dev-inspector

使用craco配置react-dev-inspector插件

1. 使用craco在不暴露配置文件的情况下配置react-dev-inspector插件实现快速定位到组件的代码文件 并在vscode等编辑器中打开该文件
2. 网上好多是暴露文件后配置webpack、loader的方式引入本插件，但是项目中一般不建议暴露配置文件
3. （本教程只是最简单的实现了 点击页面 vscode自动打开被点击的组件所在的文件并定位到起始行数，剩余其他的功能并未在本文章中实现，因为本人只是用到了这个功能，相信大多数人也只是用到了这一点功能）

第一步安装：

yarn add react-dev-inspector --save-dev

第二步修改代码

（前提是你已经用上了craco,没有的可看antd官网有介绍react项目中使用craco配置antd）

App.txs

import React, { FC } from "react";
import { Inspector } from "react-dev-inspector";
const InspectorWrapper =
  process.env.NODE_ENV === "development" ? Inspector : React.Fragment;
const App: FC = () => (
  <div className="App">
    <InspectorWrapper keys={["q", "w", "e"]}>
        <xxx>这里是你的layout组件或者其他的组件</xxx>
        <xxx>InspectorWrapper要包住你的主页面</xxx>
    </InspectorWrapper>
  </div>
  );

export default App;

craco.config.js

// antd的配置
const CracoAntDesignPlugin = require("craco-antd");
// react-dev-inspector的配置
const { ReactInspectorPlugin } = require("react-dev-inspector/plugins/webpack");

module.exports = {
  plugins: [
    {// antd的配置
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: {
          "@font-size-base": "14px",
          "@border-radius-base": "4px",
        },
      },
    },
    {// react-dev-inspector的配置 目前这些配置足够点击页面直接在vscode编辑器中找到对应的文件了 
    //剩余的高级配置需要自己去官网上学习，
    //（一般人用这个也就是快速定位的组件在项目中的位置。。。对我来说足够了）
      plugin: ReactInspectorPlugin,
      options: {
        excludes: ["xxx-file-will-be-exclude", /regexp-to-match-file /],
      },
    },
  ],
};

第三步

重启项目

进入页面 同时摁住 q+w+e （犹如英雄联盟里面放连招一样 摁完记得撒手！！不是长摁） 页面就会进入选区域ing 选中那个区域 vscode就会自动打开选中区域的代码文件！ 如果不行就在控制台手动输入一下代码在试一次

window.__REACT_DEV_INSPECTOR_TOGGLE__()

附上官网地址：react-dev-inspector插件git地址