准备项目
npx create-react-app react_zustand --template typescript
- 安装依赖，
- 启动项目，
我的项目大概就是这样:
想要快速上手项目，对应的到源码位置今天介绍一款 code-inspector-plugin
是一款基于 webpack/vite/rspack/nextjs/nuxt/umijs plugin 的提升开发效率的工具，点击页面上的 DOM，它能够自动打开你的 IDE 并将光标定位到 DOM 对应的源代码位置。
动机
在 web 开发中，当我们要修改一个组件的代码时，首先需要找到组件对应的代码位置。对于一些大型项目，代码文件数量多、文件层级深，要快速找到对应的代码位置并不是一件容易的事情。尤其是对于一个新接触项目的开发者来说，查找组件对应的代码位置往往费时费力。
因此，我们渴望有一种方式能让开发者快速定位到组件对应的代码，code-inspector-plugin 便应运而生了。只需要鼠标点击页面上的元素，就能够自动打开你的 IDE 并将光标定位到 DOM 对应的源代码位置，这样可以大幅提升开发者的体验和效率。
优点
开发提效
点击页面上的 DOM 元素，它能自动打开 IDE 并将光标定位至 DOM 的源代码位置，大幅提升开发体验和效率
简单易用
对源代码无任何侵入，只需要在打包工具中引入就能够生效，整个接入过程如喝水般一样简单
适配性强
支持在 webpack/vite/rspack/rsbuild/esbuild/farm/nextjs/nuxt/umijs 中使用，支持 vue/react/preact/solid/qwik/svelte/astro 等多个框架
上面的是官网的介绍，基本生成项目的常见脚手架就都包括了，那么我们现在集成到自己的项目中
- 先安装依赖
npm install code-inspector-plugin -D
yarn add code-inspector-plugin -D
pnpm add code-inspector-plugin -D //都是可以的
我的项目是用cra搭的那么要扩展现有的项目那么需要craco
可以让你在不“eject”项目的情况下扩展 CRA 的 webpack 配置
eject 的代价 运行 npm run eject 会永久暴露所有配置文件和脚本，导致：
- 失去 CRA 的版本自动升级能力；
- 需自行维护所有配置，复杂度陡增。`
所以使用 craco (推荐)
craco (Create React App Configuration Override) 是一个非常流行的工具，它允许你在不 eject 的情况下覆盖 CRA 的内部配置，包括 webpack、Babel、ESLint 等。这是最推荐的方式，因为它既能让你定制化，又能保持 CRA 的可升级性。
步骤：
-
安装
craco：Bash
npm install @craco/craco --save-dev # 或者 yarn add @craco/craco --dev -
修改
package.json中的脚本： 将react-scripts替换为craco。JSON
"scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" // eject 保持不变 }, -
创建
craco.config.js文件： 在项目的根目录下创建一个craco.config.js文件。在这个文件中，你可以编写 JavaScript 来修改 webpack 配置。例如，如果你想添加一个 webpack 插件（比如
DefinePlugin）和一个 loader（比如处理 Markdown 文件）：
// craco.config.js
const webpack = require('webpack');
const path = require('path');
const { codeInspectorPlugin } = require('code-inspector-plugin');
module.exports = {
webpack: {
// 配置 webpack 插件
plugins: [
// new webpack.DefinePlugin({
// // 定义全局变量，例如在代码中可以使用 process.env.MY_VAR
// 'process.env.MY_VAR': JSON.stringify('这是我的自定义变量'),
// }),
codeInspectorPlugin({//将插件配置到webpack的插件槽中
bundler: 'webpack',
}),
],
// 配置 webpack loaders
// configure: (webpackConfig, { env, paths }) => {
// // 添加一个新的 loader 规则来处理 .md 文件
// webpackConfig.module.rules.push({
// test: /\.md$/,
// use: 'raw-loader', // raw-loader 可以将文件内容作为字符串导入
// });
// // 如果需要修改现有的 loader，例如修改 Babel loader
// // webpackConfig.module.rules.forEach(rule => {
// // if (rule.oneOf) {
// // rule.oneOf.forEach(oneOfRule => {
// // if (oneOfRule.loader && oneOfRule.loader.includes('babel-loader')) {
// // // 在这里修改 Babel loader 的配置
// // }
// // });
// // }
// // });
// return webpackConfig;
// },
},
// 如果你想配置 Babel 或者 ESLint 也可以在这里添加
// babel: {
// plugins: [
// // ...你的 Babel 插件
// ],
// },
// eslint: {
// mode: 'file',
// configure: {
// rules: {
// 'no-unused-vars': 'off', // 示例：关闭 ESLint 的 no-unused-vars 警告
// },
// },
// },
};
对照着上面的代码，修改对应的配置文件，之后重新启动项目：
(Mac 系统默认组合键是
Option + Shift；Window 的默认组合键是 Alt + Shift，在浏览器控制台会输出相关组合键提示)
启动后，点击对应位置就会出现源码中的位置，然后点击，就跳到你ide的源码位置了。
