定位页面组件在React项目中的位置

如果点击页面上的组件，在 VSCode 中自动跳转到对应文件，并定位到对应行号。在大项目的开发和维护过程中，拥有这样一个调试神器可以很好的节约时间。react-dev-inspector 可以满足这个需求。

原理

• 构建时：
  • 需要加一个 webpack loader 去遍历编译前的的 AST 节点，在 DOM 节点上加上文件路径、名称等相关的信息 。
  • 需要用 DefinePlugin 注入项目运行时的根路径，后续要用来拼接文件路径，打开 VSCode 相应的文件。

• 运行时：需要在 React 组件的最外层包裹 Inspector 组件，用于在浏览器端监听快捷键，弹出 debug 的遮罩层，在点击遮罩层的时候，获取组件的名称，借助 fetch 发送了一个请求到本机的服务端，利用服务端执行脚本命令如 code src/Inspector/index.ts 这样的命令来打开 VSCode。
• 本地服务：需要启动 create-react-app 底层的工具包 react-dev-utils 里的一个中间件 errorOverlayMiddleware，监听一个特定的路径，在本机服务端执行打开 VSCode 的指令。

如何使用？

webpack.config.js：

const { DefinePlugin } = require('webpack');

{
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['es2015', 'react'],
            },
          },
          // 注意这个 loader babel 编译之前执行
          {
            loader: 'react-dev-inspector/plugins/webpack/inspector-loader',
            options: { exclude: [resolve(__dirname, '想要排除的目录')] },
          },
        ],
      }
    ],
  },
  plugins: [
    new DefinePlugin({
      'process.env.PWD': JSON.stringify(process.env.PWD),
    }),
  ]
}

index.ts：

import React from 'react'
import { Inspector } from 'react-dev-inspector'

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

export const Layout = () => {
  // ...

  return (
    <InspectorWrapper
      keys={['control', 'shift', 'command', 'c']} // default keys
      ...  // Props see below
    >
     <Page />
    </InspectorWrapper>
  )
}