Vite中npm包内的?raw导入失效问题求助

问题核心：Vite默认将node_modules中的第三方包视为预构建完成的产物，不会对其文件解析?raw这类Vite专属的导入后缀语法，因此包内的import theCode from './code-file.js?raw'无法被正确处理。

下面提供三种可行的解决方法：

方法一：在Vite项目中配置，让目标包被Vite处理 #

修改项目根目录的vite.config.js，通过配置让Vite不对目标包进行预构建，而是实时处理其文件中的?raw导入：

import { defineConfig } from 'vite';

export default defineConfig({
  optimizeDeps: {
    exclude: ['the-package'] // 排除该包，避免Vite预构建它
  },
  server: {
    fs: {
      allow: ['node_modules/the-package'] // 允许Vite访问包内文件
    }
  }
});

这样配置后，Vite会像处理项目自身源码一样解析包内的?raw导入语法。

方法二：修改npm包本身，移除对Vite专属语法的依赖 #

如果你的包需要兼容更多构建工具，建议直接在包内处理文件内容的导入，避免依赖Vite的?raw：

• 若包使用CommonJS规范：

const fs = require('fs');
const path = require('path');
const theCode = fs.readFileSync(path.join(__dirname, 'code-file.js'), 'utf8');
module.exports = theCode;

• 若包使用ES模块规范（注意：这种方式在浏览器环境需配合打包工具）：

import fs from 'fs/promises';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default await fs.readFile(path.join(__dirname, 'code-file.js'), 'utf8');

方法三：提前用Vite打包npm包，嵌入raw内容 #

在the-package的目录下，用Vite将包打包成成品，让?raw导入的内容被提前嵌入：

1. 在包目录创建vite.config.js：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: './main-file.js',
      fileName: 'main-file',
      formats: ['es', 'cjs']
    }
  }
});

2. 运行vite build，打包后的文件会将code-file.js的内容直接嵌入，用户导入时无需再处理?raw语法。

内容的提问来源于stack exchange，提问作者Peppe L-G