SvelteKit node适配器构建输出含import关键字的原因及配置方案

SvelteKit 默认客户端代码输出为原生ES模块格式，你观察到的import关键字、modulepreload标签都是面向现代浏览器的标准优化行为，默认已经经过Rollup打包处理，只是输出格式为ES模块而非传统自执行脚本格式。要输出不含import关键字的传统JS格式，按以下步骤配置即可：

1. 安装依赖
   首先安装Vite旧浏览器兼容插件和对应的压缩工具：

npm install @vitejs/plugin-legacy terser --save-dev

2. 修改项目配置
   编辑项目根目录的svelte.config.js文件，调整Vite构建配置：

import adapter from '@sveltejs/adapter-node';
import legacy from '@vitejs/plugin-legacy';

const config = {
  kit: {
    adapter: adapter(),
    vite: {
      plugins: [
        legacy({
          // 可根据自己的兼容需求调整目标浏览器版本
          targets: ['chrome >= 49', 'firefox >= 45', 'safari >= 10'],
          additionalLegacyPolyfills: ['regenerator-runtime/runtime']
        })
      ],
      build: {
        // 可选：关闭ES模块的预加载配置
        modulePreload: false
      }
    }
  }
};

export default config;

3. 重新执行构建
   运行npm run build命令重新打包，此时输出的HTML会同时包含面向现代浏览器的ES模块脚本，和不带import关键字、适配旧浏览器的传统脚本，传统脚本会自动添加nomodule属性，不会和现代浏览器的加载逻辑冲突。如果需要完全移除ES模块输出，可在legacy插件配置中新增renderLegacyChunks: true, modernPolyfills: false，并调整构建输出格式即可。

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