Rollup打包JavaScript模块报错：cars_js未定义的解决咨询

问题根源 #

这个错误本质是Rollup的输出模块格式与浏览器的加载方式不匹配，导致打包后的变量无法被浏览器正确识别或访问。cars_js是Rollup对模块内部变量重命名后的标识，浏览器找不到这个全局变量就会抛出错误。

具体修复步骤 #

1. 检查并调整Rollup配置文件 #

打开rollup.config.js，重点修改output配置项，确保格式和全局暴露设置正确：

方案A：使用IIFE格式（适合浏览器全局环境）

将输出格式改为iife（立即执行函数表达式），同时指定全局变量名，让打包后的代码把导出内容挂载到全局：

export default {
  input: 'index.js',
  output: {
    file: 'bundle.js',
    format: 'iife',
    name: 'CarApp' // 自定义全局对象名，后续可通过window.CarApp访问导出内容
  }
};

执行打包命令rollup -c重新生成bundle.js，之后在HTML里用普通<script>引入即可：

<script src="bundle.js"></script>
<!-- 比如要访问cars变量，就用 CarApp.cars -->

方案B：使用ES模块格式（现代浏览器推荐）

如果想保留ES模块特性，修改HTML的script标签为模块类型：

<script type="module" src="bundle.js"></script>

如果需要在全局访问模块内的变量，要在index.js里手动挂载到window：

// index.js
import { cars } from './cars.js';
// 把变量暴露到全局
window.cars = cars;

2. 验证源码的导入导出语法 #

确保你的模块语法正确：

• cars.js需正确导出变量：

// cars.js
export const cars = ['Tesla', 'Toyota', 'Ford'];
// 或者用默认导出：export default cars;

• index.js需正确导入：

// index.js
// 对应命名导出
import { cars } from './cars.js';
// 若用默认导出则写成：import cars from './cars.js';

3. 确认打包命令执行正确 #

检查package.json里的打包脚本是否正确：

{
  "scripts": {
    "build": "rollup -c"
  }
}

执行npm run build重新打包，确保生成的bundle.js是最新的。

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