布景
在前端项目开发过程中,快速定位 DOM 元素对应的源码关于开发者来说非常重要。一般,开发者可能会依据 DOM 元素的 class 称号或案牍来查找。然而,LocatorJS 作为一款优异的工具,能够协助您快速定位源码。
了解 click-to-component
在介绍 LocatorJS 之前,咱们先来了解一下 click-to-component 这个 npm 包。它的功用是:通过点击浏览器中的 React 组件,就能在 VSCode 中翻开对应的源代码。
本文要点在于 LocatorJS,因而仅介绍在 Create React App
中运用 click-to-component
的方法。其他运用方法可参考其官方文档。
首要,在项目中装置 click-to-component
:
# 能够选择运用 yarn 或 pnpm 装置
npm install click-to-react-component
然后在代码中引进 click-to-component
:
+import { ClickToComponent } from 'click-to-react-component';
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
@@ -8,7 +7,6 @@ import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
+ <ClickToComponent />
<App />
</React.StrictMode>
);
终究效果:
尽管看起来不错,但从实际应用角度来看,click-to-component
存在一些限制:
- 仅支撑 React
- 需要在项目中引进
npm
包
接下来咱们将介绍 LocatorJS 怎么处理这些问题。
LocatorJS 的优势
产品形状:浏览器插件,支撑 Chrome (包括基于 Chromium 项目的 Edge, Opera 等) 和 Firefox
前端结构支撑:React, SolidJS, Preact, Svelte(实验性支撑), Vue(实验性支撑)
明显,LocatorJS 通过浏览器插件处理了前面说到的问题,并支撑更多前端结构。
下面咱们将介绍怎么运用 LocatorJS。
怎么运用 LocatorJS
以 React 项目为例,首要咱们需要装置 LocatorJS 的浏览器插件。
装置完成后,咱们需要在项目中修正 @babel/preset-react
的 development
字段:
{
"presets": [
[
"@babel/preset-react",
{
// 依据你的项目实际情况修正
"development": process.env.NODE_ENV === "development"
}
]
]
}
注意:如果你运用的是 create-react-app
、create-next-app
等高级脚手架,那么你无需进行任何修正,由于这些脚手架现已帮你处理了这个问题。
终究效果:
LocatorJS 也能够作为 npm
包引进,有爱好的同学能够自行查看。
总结
LocatorJS 供给了点击浏览器中的 DOM 元素后直接跳转至源码的功用。相较于 click-to-component
,LocatorJS 以浏览器插件的形式实现了这一功用,无需在项目中引进额外的 npm
包,且支撑更多的前端结构。