使用Rollup实现绝对路径导入遇到的问题

听起来你碰到了Rollup配置绝对路径别名时的典型坑——我之前也踩过类似的，咱们一步步把它搞定。

问题根源 #

Rollup本身不会自动为导入的模块补全扩展名，rollup-plugin-alias只负责替换路径前缀，不会帮你加上.js/.ts这类后缀，所以才会出现c:\path\to\applicationRoot\renderUI不存在的错误（实际文件应该是带扩展名的renderUI.js或其他格式）。

解决方案 #

你需要搭配@rollup/plugin-node-resolve插件来处理扩展名解析，同时调整别名配置确保路径映射准确。

步骤1：安装必要插件

如果还没安装，先把这两个插件装上：

npm install --save-dev rollup-plugin-alias @rollup/plugin-node-resolve

步骤2：调整Rollup配置文件

在你的rollup.config.js里按下面的方式配置：

import alias from 'rollup-plugin-alias';
import resolve from '@rollup/plugin-node-resolve';

export default {
  // ...其他项目配置
  plugins: [
    alias({
      entries: [
        // 示例：把@指向项目根目录下的src文件夹，根据你的需求调整
        { find: '@', replacement: './src' },
        // 如果是直接指向某个模块文件，记得补全扩展名
        // { find: 'renderUI', replacement: './src/components/renderUI.js' }
      ]
    }),
    resolve({
      // 指定Rollup需要解析的文件扩展名，根据你的项目技术栈调整
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
    })
  ]
};

额外注意事项

• 如果你的别名指向单个文件而非目录，一定要在replacement里加上完整扩展名，避免解析失败；
• 如果你用TypeScript开发，记得同步调整tsconfig.json里的paths配置，和Rollup的别名保持一致，避免编辑器报错：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"]
      }
    }
  }
  

这样配置后，Rollup就能正确识别带别名的导入，自动补全扩展名，不会再出现找不到文件的错误了。

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