rollup-plugin-esbuild无法解析无.ts后缀导入路径的问题求助

核心配置调整 #

要让rollup-plugin-esbuild识别import 'loading/loading'这类无后缀导入，需要同时配置rollup-plugin-esbuild的解析后缀，以及@rollup/plugin-resolve的扩展参数，具体操作如下：

1. 替换插件并配置esbuild解析规则
   确保已安装rollup-plugin-esbuild，将原配置中的typescript()替换为esbuild()，并显式指定需要解析的文件后缀：

2. 适配resolve插件的monorepo解析逻辑
   调整@rollup/plugin-resolve的扩展参数，开启工作区模式以适配monorepo结构。

修改后的完整Rollup配置：

import { defineConfig } from 'rollup';
import esbuild from 'rollup-plugin-esbuild';
import resolve from '@rollup/plugin-resolve';
import litcssPlugin from 'rollup-plugin-lit-css';
import MinifyHTML from 'rollup-plugin-minify-html-literals';
import filesize from 'rollup-plugin-filesize';

export default defineConfig({
    input: packages,
    output: {
        dir: 'dist',
        chunkFileNames: 'chunk/[hash].js',
        compact: true
    },
    plugins: [
        litcssPlugin,
        MinifyHTML.default(),
        esbuild({
            // 指定需要解析的文件后缀，让esbuild自动匹配无后缀导入
            resolveExtensions: ['.ts', '.js', '.mjs', '.cjs']
        }),
        resolve({
            // 配置resolve插件支持的后缀，与esbuild保持一致
            extensions: ['.ts', '.js', '.mjs', '.cjs'],
            // 开启monorepo工作区解析，优先加载本地包
            workspace: true
        }),
        filesize()
    ]
});

辅助TypeScript配置检查 #

确保tsconfig.json配置正确，让TypeScript能识别monorepo中的模块导入：

• 将moduleResolution设置为NodeNext或Node16，适配ES模块解析逻辑
• 若使用monorepo工作区，确保include覆盖所有工作区包，或配置paths映射：

{
  "compilerOptions": {
    "moduleResolution": "NodeNext",
    "paths": {
      "loading/*": ["./packages/loading/*"]
    }
  },
  "include": ["packages/**/*"]
}

完成以上配置后，rollup-plugin-esbuild即可正常解析import 'loading/loading'这类无后缀导入，同时TypeScript类型检查也能正常通过。

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