如何将Svelte组件编译为模块化ES模块，避免打包共享依赖

要实现将Svelte组件编译为保留外部依赖import语句的ES模块，可通过以下两种方案完成：

方案一：用Node.js脚本直接调用Svelte编译API #

这种方式灵活可控，适合自定义编译逻辑：

1. 安装依赖

npm install svelte svelte-preprocess typescript --save-dev

2. 编写编译脚本（比如compile-components.js）

const fs = require('fs');
const path = require('path');
const svelte = require('svelte/compiler');
const preprocess = require('svelte-preprocess');

// 定义需要编译的组件文件
const targetComponents = ['table.svelte', 'toolbar.svelte'];

targetComponents.forEach(componentPath => {
  const fullPath = path.resolve(__dirname, componentPath);
  const sourceCode = fs.readFileSync(fullPath, 'utf8');

  // 执行编译，输出ES模块格式，保留原始依赖引用
  const compileResult = svelte.compile(sourceCode, {
    format: 'es',
    filename: componentPath,
    generate: 'dom',
    preprocess: preprocess({ typescript: true }) // 支持TS脚本的组件
  });

  // 生成对应输出文件（比如table.svelte → table.js）
  const outputPath = componentPath.replace('.svelte', '.js');
  fs.writeFileSync(path.resolve(__dirname, outputPath), compileResult.js.code);
});

3. 运行脚本

node compile-components.js

方案二：用Rollup配置编译 #

适合工程化场景，Rollup原生支持ES模块且能精准控制外部依赖：

1. 安装依赖

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

2. 创建Rollup配置文件（rollup.config.js）

import svelte from '@rollup/plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import preprocess from 'svelte-preprocess';

// 为每个组件单独配置编译任务
export default [
  {
    input: 'table.svelte',
    output: {
      file: 'table.js',
      format: 'es' // 输出ES模块
    },
    plugins: [
      svelte({
        preprocess: preprocess({ typescript: true })
      }),
      resolve()
    ],
    external: ['lib/shared-lib.ts'] // 标记该依赖为外部，不打包进组件
  },
  {
    input: 'toolbar.svelte',
    output: {
      file: 'toolbar.js',
      format: 'es'
    },
    plugins: [
      svelte({
        preprocess: preprocess({ typescript: true })
      }),
      resolve()
    ],
    external: ['lib/shared-lib.ts']
  }
];

3. 执行编译

npx rollup -c

后续使用说明 #

• 编译后的table.js和toolbar.js是标准ES模块，可直接在app.ts中通过import './table.js'引入使用，和普通JS模块完全兼容。
• 如果需要TypeScript类型提示，可使用svelte2tsx工具生成对应的.d.ts类型文件。
• 之后你可以用任意构建工具（Vite、Webpack等）打包整个app目录，共享依赖lib/shared-lib.ts会被统一处理，不会重复打包。

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