如何通过SvelteKit从node_modules提供BeerCSS静态资源？

下面提供几种可行方案，覆盖开发和生产环境：

1. 开发环境用Vite中间件映射 #

SvelteKit基于Vite，直接修改vite.config.js，通过中间件把node_modules里的目录映射到static子路径：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    fs: {
      allow: ['node_modules'], // 允许Vite访问node_modules目录
    },
    configureServer(server) {
      // 把 /static/third-party 路径的请求转发到 node_modules/xxx/dist
      server.middlewares.use('/static/third-party', (req, res, next) => {
        const targetPath = resolve(
          process.cwd(),
          'node_modules/xxx/dist',
          req.url.replace('/static/third-party', '')
        );
        res.sendFile(targetPath, (err) => {
          if (err) next(); // 文件不存在时走默认路由
        });
      });
    }
  }
});

2. 生产环境用Server Hooks拦截请求 #

在src/hooks.server.js里写处理逻辑，拦截目标路径的请求，返回node_modules里的静态文件：

import { createReadStream } from 'fs';
import { resolve } from 'path';
import { stat } from 'fs/promises';

export async function handle({ event, resolve }) {
  const targetPrefix = '/static/third-party';
  if (event.url.pathname.startsWith(targetPrefix)) {
    const relativePath = event.url.pathname.replace(targetPrefix, '');
    const filePath = resolve(process.cwd(), 'node_modules/xxx/dist', relativePath);
    
    try {
      const fileStats = await stat(filePath);
      if (fileStats.isFile()) {
        // 根据文件类型设置Content-Type，可根据后缀做更细的处理
        const contentType = filePath.endsWith('.js') 
          ? 'application/javascript' 
          : filePath.endsWith('.css') 
            ? 'text/css' 
            : 'application/octet-stream';
        
        return new Response(createReadStream(filePath), {
          headers: {
            'Content-Type': contentType,
            'Content-Length': fileStats.size.toString()
          }
        });
      }
    } catch (err) {
      // 文件不存在，继续走默认处理流程
    }
  }
  return resolve(event);
}

3. 构建前复制文件到static目录 #

如果不需要动态映射，直接在构建脚本里把node_modules的静态文件复制到static目录，用copyfiles工具即可：

1. 安装依赖：npm install copyfiles --save-dev
2. 修改package.json的build脚本：

"scripts": {
  "build": "copyfiles node_modules/xxx/dist/** static/third-party && vite build",
  "dev": "vite dev"
}

运行npm run build时，会自动把目标目录的文件复制到static下，SvelteKit会像处理普通静态资源一样提供这些文件。

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