在 React 开发中如何快速定位组件源码

作者:段文建

痛点

我们的主项目代码库目前已经有 2800 个组件。数千个组件构成几十个路由页面。

无论是新同学或者是老同学,在定位问题或者是开发页面的时候寻找对应的源代码都相当痛苦。搜文案?搜 class?都发现有大量的重复。针对这个问题我调研了下业内相对应的解决方案。发现目前已经有一些工具或者 npm 包解决这个问题,本文就和大家分享下。

解决方案

方案一:chrome React Developer Tools 插件

chrome.google.com/webstore/de...

推荐指数:🌟

不快!

使用方式

  1. 打开 chrome devTools -> 选择 Components -> 选择 vscode 打开。

可以通过自定义协议的方式打开更多编辑器

  1. 选择需要打开的组件 -> 点击 open in editor(大大的箭头我找入口找了好久)。

演示

优点

  • 无需修改代码,安装即用;
  • 可以顺便看看组件参数;

缺点

  • 操作路径复杂,需要打开控制台 - 定位组件 - 点击打开;
  • 在大型项目中经常出现加载中/加载失败/超时等问题。极度不稳定;

方案二:chrome 插件

推荐指数:🌟🌟🌟

虽然这种方式基本满足要求,但是作为提效工具要满足快准狠。

相关插件:React Inspector,locatorjs(可以手动选择无法定位的层级)。

使用方式

安装后使用对应快捷键触发,选择需要打开的组件即可打开。

演示

优点

  • 无需修改代码,安装即用;
  • 操作简单;

缺点

  • 依靠 react 代码生成在 fiber 节点的 _debugSource属性实现。无该属性则无法打开定位;
  • 针对一些特殊写法定位不准确,在组件内直接返回另一个组件的的编写方式下情况更明显;

方案三:react-dev-inspector npm 包实现

推荐指数:🌟🌟🌟🌟🌟

一次操作幸福一生!

代码接入

React-dev-inspector 官网有详细接入步骤。但是我在接入过程中遇到一些坑点。这里总结下我的接入方式,可以避免一些问题。

  1. 安装 @react-dev-inspector/babel-plugin 和 react-dev-inspector。
css 复制代码
npm i -D @react-dev-inspector/babel-plugin react-dev-inspector
  1. 在 .babelrc 中添加 babel 插件。
perl 复制代码
{
  "plugins": ["@react-dev-inspector/babel-plugin"]
}
  1. 在 React-dev-inspector 中有两种调起编辑器的方式。一种是浏览器 schema 直接调起,另外一种是 node 服务调起。

下面我们先看 schema 调起:

schema 调起比较简单;node 中间件服务调起基于 react-dev-utils 提供的调起方法,能调起更多种类的编辑器。

react-dev-utils 调起代码:github.com/facebook/cr...

服务中间件调起(React-dev-inspector 包默认调起方式)

不推荐!

  • 在业务根组件代码中引入调起组件。
javascript 复制代码
import { Inspector } from 'react-dev-inspector';

// 调起组件
<Inspector />
  • 安装中间件服务。
css 复制代码
npm i -D @react-dev-inspector/middleware
  • devServer 加入中间件。
javascript 复制代码
const { launchEditorMiddleware } = require('@react-dev-inspector/middleware')
// webpack 5
module.exports = {
  ...
  devServer: {
    setupMiddlewares(middlewares) {
      middlewares.unshift(launchEditorMiddleware)
      return middlewares
    },
  },
}

// webpack 4
module.exports = {
  ...
  devServer: {
    before: (app, server, compiler) => {
      app.use(launchEditorMiddleware)
    },
  },
}

react-dev-inspector 默认打包注入的路径是相对路径。再通过 node 中间件服务调起拼接路径。当代码路径和 devServer 不在同一个目录下(在微前端项目中存在子应用在不同的代码库),这种方式会出现调起失败。因为拼接的路径是接收请求处理的 node 服务的工作目录。如果子应用不在这个路径下,则会失败。针对这种场景可以采用 schema 调起解决。

schema 调起

  • 将当前应用目录添加到全局变量
ini 复制代码
//webpack.config.js
var webpack = require('webpack');
module.exports = {
    ...
    plugins: [
        new webpack.DefinePlugin({
            'process.env.CWD': JSON.stringify(process.cwd()),
        })
    ]
};
  • 自定义调起组件逻辑。
ini 复制代码
import React from 'react';
import { Inspector } from 'react-dev-inspector';
import {
    gotoVSCode,
    gotoWebStorm
} from 'react-dev-inspector/lib/Inspector/utils/editor';

const InspectorPlugin = () => {
    if (process.env.NODE_ENV === 'development') {
        return (
            <Inspector
                onInspectElement={({ codeInfo }) => {
                    // 拼接工作目录
                    if (codeInfo.absolutePath === undefined) {
                        codeInfo.absolutePath = `${process.env.CWD}/${codeInfo.relativePath}`;
                        delete codeInfo.relativePath;
                    }
                    // 调起vscode
                    gotoVSCode(codeInfo);
                    // 调起WebStorm
                    // gotoWebStorm(codeInfo);
                }}
            />
        );
    }
    return null;
};

export default InspectorPlugin;
  • 在业务根组件代码中引入调起组件。
javascript 复制代码
import InspectorWrapper from '...';

<InspectorWrapper />
  1. 使用快捷键选择组件打开编辑器。

演示

优点

  • 解决了上述两种方案的缺点。调起速度快,任何节点都可以调起;

缺点

  • 需要代码接入;
  • 打包时长较长(待解决)(电脑性能较差可以选择第二个方案的 locatorjs 插件);

插件下载地址

locatorjs:chrome.google.com/webstore/de...

React Inspector:chrome.google.com/webstore/de...

参考文档

react-dev-inspector 官网:github.com/zthxxx/reac...

相关推荐
gqkmiss3 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃9 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰13 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye19 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm21 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生1 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互