Vite生产构建无法解析diff-match-patch问题求助

问题原因 #

diff-match-patch属于传统CommonJS模块，Vite生产构建依赖的Rollup在模块解析逻辑上和VueCLI使用的Webpack存在差异，导致无法正确识别该库的导出内容。

具体解决办法 #

1. 确认依赖已正确安装 #

先确保该库已添加到项目依赖：

npm install diff-match-patch --save

2. 调整导入路径，直接指向ES模块文件 #

修改导入语句，直接引用库的dist目录下的ES模块版本：

<script setup lang="ts">
import { DIFF_DELETE, DIFF_EQUAL, DIFF_INSERT, diff_match_patch as DiffMatchPatch } from 'diff-match-patch/dist/diff-match-patch'
</script>

3. 配置Rollup的CommonJS转换插件 #

若调整路径无效，可通过Rollup插件将该库转为ES模块：
首先安装插件：

npm install @rollup/plugin-commonjs --save-dev

然后修改vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import commonjs from '@rollup/plugin-commonjs'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      plugins: [
        commonjs({
          include: ['node_modules/diff-match-patch/**']
        })
      ]
    }
  }
})

4. 优化依赖预构建（可选） #

如果开发模式正常但构建异常，可让Vite预构建时优先处理该库：

export default defineConfig({
  // ...其他配置
  optimizeDeps: {
    include: ['diff-match-patch']
  }
})

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