SvelteKit下npm标准导入机制失效问题咨询

问题根因 #

SvelteKit依赖的Vite模块解析器，默认不会自动识别项目内部package.json中的exports配置，导致.svelte文件里的子路径导入无法被正确解析。而JS文件能正常工作，是因为Node.js或构建工具对JS文件的模块解析逻辑与Svelte文件的处理流程存在差异。

可行解决方案 #

1. 配置Vite路径别名 #

在项目根目录的vite.config.js中添加别名映射，手动告诉Vite如何解析你的包路径：

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

export default defineConfig({
	plugins: [sveltekit()],
	resolve: {
		alias: {
			'@jdeighan/something/utils': './src/lib/utils.js'
			// 其他需要导入的子路径，按同样格式添加
		}
	}
});

配置完成后，Vite会直接将@jdeighan/something/utils映射到对应的文件路径，.svelte文件中的导入就能正常识别。

2. 校验package.json配置完整性 #

确保你的package.json满足以下要求：

• 正确设置type为module，适配ES模块规范：

  {
    "type": "module"
  }
  

• exports字段包含所有需要的子路径，且文件指向准确：

  {
    "name": "@jdeighan/something",
    "exports": {
      "./utils": "./src/lib/utils.js",
      "./other-module": "./src/lib/other-module.js"
    }
  }
  

3. 清理缓存并重启服务 #

修改配置后，删除项目根目录下的.svelte-kit和node_modules/.vite文件夹，清空缓存后重启开发服务器，确保新配置生效。

补充提示 #

如果后续需要新增子路径导入，只需在vite.config.js的alias或package.json的exports中对应添加即可，这样既能保留你习惯的npm标准导入方式，又能兼容SvelteKit的解析逻辑。

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