能否使用Vite/Rollup仅转译代码为CJS/ESM而不进行打包？

要实现仅转译TS/TSX文件为CJS或MJS、保留原模块结构而非打包成单文件，你可以通过配置Rollup或Vite的preserveModules选项来实现，同时结合TypeScript和Preact相关插件处理语法。

一、Rollup 配置方案 #

Rollup本身支持保留模块结构，只需在配置中开启preserveModules，并搭配TypeScript插件处理TS/TSX语法：

1. 安装依赖

npm install rollup @rollup/plugin-typescript @rollup/plugin-node-resolve typescript --save-dev
# 若用Preact，额外安装：
npm install @rollup/plugin-babel @babel/preset-react preact --save-dev

2. 创建rollup.config.js

import typescript from '@rollup/plugin-typescript';
import resolve from '@rollup/plugin-node-resolve';
// Preact用户需添加babel插件
import babel from '@rollup/plugin-babel';

export default {
  // 指定所有需要转译的TS/TSX文件，或用数组指定多个入口
  input: 'src/**/*.{ts,tsx}',
  output: [
    {
      dir: 'dist/cjs',
      format: 'cjs', // 输出CommonJS格式
      preserveModules: true, // 保留原模块结构，不打包
      preserveModulesRoot: 'src', // 保持dist目录结构与src一致
    },
    {
      dir: 'dist/esm',
      format: 'es', // 输出ES模块（对应.mjs）
      preserveModules: true,
      preserveModulesRoot: 'src',
    }
  ],
  plugins: [
    resolve(),
    typescript({
      tsconfig: './tsconfig.json',
      // Preact用户需配置JSX
      jsx: 'react-jsx',
      jsxImportSource: 'preact'
    }),
    // Preact用户添加babel配置
    babel({
      extensions: ['.ts', '.tsx'],
      presets: [['@babel/preset-react', { runtime: 'automatic', importSource: 'preact' }]],
      babelHelpers: 'bundled'
    })
  ]
};

3. 配置tsconfig.json（关键项）

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "jsxImportSource": "preact", // Preact用户必填
    "moduleResolution": "node",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"]
}

4. 执行转译
   在package.json中添加脚本：

{
  "scripts": {
    "build": "rollup -c"
  }
}

运行npm run build后，dist/cjs和dist/esm目录会生成与src结构一致的CJS/MJS文件。

二、Vite 配置方案 #

Vite基于Rollup，可通过build.preserveModules实现同样效果，适合需要Vite开发环境的场景：

1. 安装依赖

npm install vite @vitejs/plugin-preact typescript --save-dev

2. 创建vite.config.ts

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

export default defineConfig({
  plugins: [preact()],
  build: {
    lib: {
      // 支持多入口，或用数组指定具体文件
      entry: 'src/**/*.{ts,tsx}',
      formats: ['cjs', 'es'] // 输出CJS和ES模块
    },
    rollupOptions: {
      output: {
        preserveModules: true, // 保留原模块结构
        preserveModulesRoot: 'src',
      }
    }
  }
});

3. 执行转译
   添加脚本后运行npm run build，Vite会在dist目录生成对应格式的模块文件，保留原目录结构。

关键说明 #

• preserveModules: true是核心配置，它告诉Rollup/Vite不要将模块合并为单文件，而是逐个转译输出。
• preserveModulesRoot用于保持输出目录结构与源码目录一致，避免文件扁平化。
• Preact用户需确保TS和插件的JSX配置指向preact，避免默认使用React的JSX转换。

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