我们的主项目代码库目前已经有 2800 多个组件。数千个组件构成几十个路由页面。
无论是新同学或者是老同学,在定位问题或者是开发页面的时候寻找对应的源代码都相当痛苦。搜文案?搜 class?都发现有大量的重复。针对这个问题我调研了下业内相对应的解决方案。发现目前已经有一些工具或者 npm 包解决这个问题,本文就和大家分享下。
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?utm_source=ext_app_menu
不快!
可以通过自定义协议的方式打开更多编辑器
虽然这种方式基本满足要求,但是作为提效工具要满足快准狠。
相关插件:React Inspector,locatorjs(可以手动选择无法定位的层级)。
安装后使用对应快捷键触发,选择需要打开的组件即可打开。
一次操作幸福一生!
React-dev-inspector 官网有详细接入步骤。但是我在接入过程中遇到一些坑点。这里总结下我的接入方式,可以避免一些问题。
npm i -D @react-dev-inspector/babel-plugin react-dev-inspector
{
"plugins": ["@react-dev-inspector/babel-plugin"]
}
下面我们先看 schema 调起:
schema 调起比较简单;node 中间件服务调起基于 react-dev-utils 提供的调起方法,能调起更多种类的编辑器。
react-dev-utils 调起代码:https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/launchEditor.js#L29
不推荐!
import { Inspector } from 'react-dev-inspector';
// 调起组件
<Inspector />
npm i -D @react-dev-inspector/middleware
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 调起解决。
//webpack.config.js
var webpack = require('webpack');
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
'process.env.CWD': JSON.stringify(process.cwd()),
})
]
};
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;
import InspectorWrapper from '...';
<InspectorWrapper />
locatorjs:https://chrome.google.com/webstore/detail/locatorjs/npbfdllefekhdplbkdigpncggmojpefi
React Inspector:https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh
react-dev-inspector 官网:https://github.com/zthxxx/react-dev-inspector
「营销科学」致力于帮助品牌生意长期科学增长,通过科学的诊断、洞察、优化和度量,将品牌的人群、内容、触点和商品变得可量化、可沉淀、可优化,通过分所各类资产的变化和流转,帮助品牌做营销决策,实现在充满不确定性的大环境下,提升营销效率和和增长确定性。
营销科学前端团队负责字节跳动旗下的数字化商业增长引擎「巨量云图」&「巨量算数」平台功能开发、易用性改进、数据可视化和前端工程优化,为用户提供更好的产品体验。我们的主要技术栈有 React、TypeScript、NodeJS、Taro等。
点击左下角"阅读读原文"或扫描下方二维码,我们期待你的加入!
团队 base 北京
广告前端研发工程师 - 云图:https://job.toutiao.com/s/iR59cmc9