如何在Vite构建的React组件库使用场景中调试代码？

1. 调整组件库的package.json，让开发环境引用源码 #

修改组件库sample-for-st-lib的package.json，新增exports字段区分开发与生产环境入口：

{
  "name": "sample-for-st-lib",
  "version": "1.0.0",
  "exports": {
    "./components": {
      "development": "./src/components/index.js",
      "import": "./dist/components.es.js",
      "require": "./dist/components.umd.js"
    }
  },
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

• development字段指定开发时直接加载源码文件，跳过预构建代码
• peerDependencies确保组件库复用项目的React实例，避免双React导致的hooks错误

2. 组件库Vite配置：开启SourceMap并优化构建 #

修改sample-for-st-lib/vite.config.js，确保生成SourceMap并正确配置库模式：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';

export default defineConfig({
  build: {
    lib: {
      entry: {
        components: path.resolve(__dirname, './src/components/index.js')
      },
      name: 'sample-for-st-lib',
    },
    rollupOptions: {
      external: ['react','react-dom'],
    },
    emptyOutDir: true,
    sourcemap: true // 生成构建后的SourceMap，生产环境也能调试
  },
  plugins: [react()],
  server: {
    sourcemap: true // 开发环境强制开启SourceMap
  }
});

3. 项目Vite配置：排除组件库预构建 #

修改使用组件库的项目sample-for-st/vite.config.js，告诉Vite不要预构建组件库，直接加载源码：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ['sample-for-st-lib'] // 禁止Vite预构建组件库
  },
  server: {
    sourcemap: true // 确保项目自身的SourceMap开启
  }
})

4. 修复npm link的双React问题 #

在组件库目录执行以下命令，让组件库复用项目的React实例：

npm link ../sample-for-st/node_modules/react
npm link ../sample-for-st/node_modules/react-dom

这一步能避免因两个React实例导致的Invalid hook call错误。

5. Chrome DevTools调试设置 #

打开Chrome DevTools的Settings（右上角齿轮图标），确保：

• 勾选Enable JavaScript source maps
• 勾选Enable CSS source maps

之后在Sources面板中，就能找到vite://下的组件库源码文件（比如src/components/Button.jsx），直接设置断点调试即可。

内容的提问来源于stack exchange，提问作者G_S