CRA 接入 react-dev-inspector

原文地址

CRA 接入 react-dev-inspector | GitHub

react-dev-inspector是 React 开发辅助插件，可以通过点击页面自动跳转 vscode 打开对应的组件代码

安装 react-dev-inspector

yarn add -D react-dev-inspector
# OR
npm install -D react-dev-inspector

webpack 配置

使用 react-app-rewired 和 customize-cra 方案

修改 config-overrides.js 文件

const { override, addWebpackPlugin } = require('customize-cra')
const path = require('path')
const { DefinePlugin } = require('webpack')

const isEnvDevelopment = process.env.NODE_ENV === 'development'

/**
 * 配置 inspector-loader
 * 因为 customize-cra 提供的 addWebpackModuleRule 方法存在问题
 * 从而使用自定义的 customWebpackModuleRules 方法添加 inspector-loader
 **/
const customWebpackModuleRules = (config) => {
  config.module.rules.push({
    test: /\.(tsx|jsx?)$/,
    loader: 'react-dev-inspector/plugins/webpack/inspector-loader',
    options: {
      exclude: [path.resolve(__dirname, '需要排除的目录')]
    }
  })
  return config
}

module.exports = override(
  isEnvDevelopment && customWebpackModuleRules,
  // 添加全局变量
  isEnvDevelopment && addWebpackPlugin(
    new DefinePlugin({
      'process.env.PWD': JSON.stringify(process.env.PWD)
    })
  ),
)

react 组件配置

修改 react 组件入口文件

import React, { Fragment } from 'react'
import ReactDOM from 'react-dom'
import { Inspector } from 'react-dev-inspector'

const InspectorWrapper = process.env.NODE_ENV === 'development' ? Inspector : Fragment

// keys 配置插件调用快捷键

ReactDOM.render(
  <InspectorWrapper keys={['command', 'shift', 'a']}>
    <App />
  </InspectorWrapper>,
  document.getElementById('root')
)

use-in-react

vscode 配置

1. 打开 vscode
2. 使用 command + shift + p (windows: ctrl + shift + p)
3. 搜索 code
4. 选择 Shell Command: Install 'code' command in PATH

效果图