共享组件目录下Svelte文件导入TypeScript文件引发Rollup编译错误的解决方案咨询

我完全懂你的痛点——既要让Rollup正确编译共享目录里被实际导入的TS文件，又不想让TypeScript扫描整个share目录做全量检查。下面是几个针对性的解决方案，按推荐度排序：

方案1：Rollup只编译不检查TS（最简便） #

核心思路是让Rollup仅负责编译项目实际用到的share目录TS文件，跳过TypeScript的全量类型检查，通过transpileOnly选项实现：

操作步骤： #

1. 先安装必要依赖：

npm install --save-dev @rollup/plugin-typescript typescript svelte-preprocess

2. 修改项目的Rollup配置文件（比如rollup.config.js）：

import svelte from 'rollup-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/project-b/App.svelte',
  output: {
    file: 'public/build/bundle.js',
    format: 'iife'
  },
  plugins: [
    svelte({
      preprocess: sveltePreprocess({
        // 处理Svelte文件中导入的TS代码
        typescript: {
          transpileOnly: true, // 只编译，不做类型检查
          include: ['src/project-b/**/*.ts', 'src/share/**/*.ts']
        }
      })
    }),
    // 单独处理share目录下的独立TS文件
    typescript({
      include: ['src/share/**/*.ts'],
      transpileOnly: true,
      // 可选：给共享目录单独配TS编译规则（如果需要自定义选项）
      // tsconfig: './src/share/tsconfig.shared.json'
    })
  ]
};

3. 保持项目的tsconfig.json不变（仅包含当前项目文件，不加入share目录）：

{
  "include": ["src/project-b/**/*"],
  "compilerOptions": {
    // 你的项目TS配置
  }
}

优点：配置简单，无需改动TS检查范围，Rollup会自动按需编译被导入的share文件。
缺点：失去对share目录TS文件的类型检查（如果需要类型检查，看方案2）。

方案2：仅对项目用到的share文件做TS检查 #

如果你希望保留对用到的共享代码的类型检查，但不想全量扫描share目录，可以手动精准指定TS检查的文件范围：

修改项目的tsconfig.json： #

{
  "include": [
    "src/project-b/**/*",
    // 手动列出项目实际用到的share目录文件
    "src/share/utils/utils.ts",
    "src/share/components/Button.svelte"
  ],
  "compilerOptions": {
    // 你的项目TS配置
  }
}

同时，Rollup配置可以把transpileOnly设为false（或直接移除该选项，默认会触发类型检查）。

优点：精准控制TS检查范围，只检查项目依赖的共享代码。
缺点：需要手动维护include列表，新增共享文件导入时要同步更新。

方案3：用TypeScript项目引用（适合大型共享目录） #

如果share目录本身是一个独立可维护的模块，可以通过TypeScript的项目引用实现按需检查和编译：

1. 在share目录下创建专属tsconfig.json：

{
  "compilerOptions": {
    "composite": true, // 启用项目引用
    "declaration": true,
    "outDir": "../../dist/share"
  },
  "include": ["**/*"]
}

2. 在项目的tsconfig.json中添加引用：

{
  "include": ["src/project-b/**/*"],
  "compilerOptions": {
    // 你的项目TS配置
  },
  "references": [{"path": "../share"}]
}

3. 修改Rollup配置，让它优先加载共享目录的编译产物：

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';

export default {
  // ...其他配置
  plugins: [
    resolve({
      preferBuiltins: false,
      // 优先从编译后的dist/share加载共享代码
      modulesOnly: true
    })
  ]
};

优点：实现共享目录的独立编译和类型检查，项目仅依赖编译产物，无需扫描源文件。
缺点：配置复杂度高，适合share目录有独立维护需求的场景。

为什么原来的方案会触发全量检查？ #

当你把share目录加入项目tsconfig.json的include字段时，TypeScript会递归扫描该目录下所有文件做类型检查，这正是你想要规避的。上面的方案要么让Rollup跳过检查只编译，要么精准指定检查范围，完美解决你的问题。

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