解决Rollup打包浏览器端代码时node_modules无后缀导入解析问题

问题重现 #

打包过程中出现以下错误：

main.js → stdout...
[!] Error: Could not load myfolder\node_modules\three\examples\jsm\renderers\CSS2DRenderer (imported by node_modules/openbim-components/core/SimpleRenderer/index.js): ENOENT: no such file or directory, open 'myfolder\node_modules\three\examples\jsm\renderers\CSS2DRenderer'
Error: Could not load myfolder\node_modules\three\examples\jsm\renderers\CSS2DRenderer (imported by node_modules/openbim-components/core/SimpleRenderer/index.js): ENOENT: no such file or directory, open 'myfolder\node_modules\three\examples\jsm\renderers\CSS2DRenderer'

直接原因是依赖模块（如openbim-components）中的导入语句采用了Node.js/TypeScript风格的无后缀写法，例如：

import { CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer";

但实际文件为CSS2DRenderer.js，Rollup默认严格遵循ES模块规范，要求导入必须带完整后缀，因此无法解析这类无后缀路径。

解决方案 #

1. 结合@rollup/plugin-commonjs与@rollup/plugin-node-resolve #

若openbim-components是CommonJS模块（可查看其package.json，无type字段或type为commonjs即为CJS模块），添加@rollup/plugin-commonjs插件可处理CJS模块的无后缀导入逻辑：

安装插件：

npm install @rollup/plugin-commonjs --save-dev

修改rollup.config.mjs：

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

export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'iife' // 浏览器端常用打包格式
  },
  plugins: [
    resolve({
      browser: true, // 针对浏览器环境解析模块
      extensions: ['.js', '.json'] // 指定需要解析的文件后缀
    }),
    commonjs()
  ]
};

2. 使用rollup-plugin-add-extension自动补全后缀 #

该插件可自动为缺失后缀的导入路径添加.js后缀，适配ES模块的无后缀导入场景：

安装插件：

npm install rollup-plugin-add-extension --save-dev

配置到rollup.config.mjs：

import resolve from '@rollup/plugin-node-resolve';
import addExtension from 'rollup-plugin-add-extension';

export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve({ browser: true }),
    addExtension({ extension: '.js' }) // 自动补全.js后缀
  ]
};

3. 优化@rollup/plugin-node-resolve的配置 #

确保resolve插件的extensions包含.js，并关闭Node.js内置模块优先解析：

resolve({
  browser: true,
  extensions: ['.js', '.mjs', '.json'],
  preferBuiltins: false
})

注意事项 #

• 不要同时使用多个同类型解析插件（如rollup-plugin-includepaths、rollup-plugin-resolve），避免解析逻辑冲突。
• 先确认依赖模块的类型（ES/CJS），再选择对应插件组合，提升打包效率。

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