问题背景

最近在优化 awesome-toc 的开发环境

原因

简单说下问题是咋产生的

原来的项目是

CODE
Copy
node_modules
src
    content
        index.ts

现在建了一个 demo 用于快速开发 /src/content 里的效果

CODE
Copy
demo
    node_modules
    src
        main.ts
        App.tsx
    vite.config.ts
node_modules
src
    content
        index.ts

/demo/src/App.tsx 会直接引用 /src/conent/index.ts

/src/conent/index.ts 相关的逻辑有「引用的文件里有」

React TSX
Copy
import React from 'react'

这里的 react 来源是 /nodemodules 「寻找最近一层的 nodemodules」

/demo/src/App.tsx 也有

React TSX
Copy
import React from 'react'

这里的 react 来源是 /demo/node_modules

因此 react 会有两个来源

方案

目标：不能有两个 react，需要做合并

demo 效果构建是由 /demo 下的 打包工具驱动的「vite.config.ts」 是由 vite 去寻找的 最近的 node_modules

我们固定一个就好了，不用自动寻找最近的

TypeScript
Copy
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      react: path.join(__dirname, 'node_modules/react'),
    },
  },
})