使用r.js合并文件时RequireJS破坏了我的for循环

听起来你遇到的这个问题挺棘手的——明明关掉了所有压缩混淆，只是单纯合并代码，结果for循环逻辑就出问题了？我之前也碰到过类似RequireJS构建后变量作用域相关的坑，给你几个排查和解决的思路：

1. 优先排查原代码的变量作用域隐患 #

很多时候这种“合并才出问题”的bug，根源是原代码里的变量提升或块级作用域处理不当。比如原代码里用var声明循环变量，单个模块时因为函数作用域隔离没暴露问题，但合并后不同模块的同名变量会互相污染：

// 模块A的代码
for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 100);
}
// 模块B的代码
var i = '其他值';

合并后两个模块的i会共享同一个作用域，直接打乱循环逻辑。这种情况把var改成let/const就能解决，因为let是块级作用域，不会跨循环或模块污染。

2. 检查r.js的模块合并顺序 #

即使optimize: "none"，r.js还是会解析模块依赖并按它的逻辑排序合并。如果你的for循环依赖某个模块的变量，而r.js合并时把依赖模块放在了后面，就会导致循环执行时变量还没初始化。

你可以直接打开合并后的文件，检查模块的顺序是否和你预期的一致。如果不对，可以在build.js配置里用include/exclude明确指定模块顺序，或者调整模块的依赖声明。

3. 排查循环内的闭包引用问题 #

如果原代码的for循环里有闭包（比如事件监听、定时器），合并后可能因为模块包装的变化，闭包捕获的变量和预期不符。比如：

// 原代码里的隐藏问题，单个模块时没暴露
for (var j = 0; j < 3; j++) {
  document.getElementById('btn' + j).onclick = function() {
    alert(j); // 点击所有按钮都会弹出3
  };
}

单个模块时可能因为作用域隔离没触发，但合并后和其他模块的变量产生冲突就暴露了。解决方案是用let绑定循环变量，或者用立即执行函数（IIFE）做变量捕获：

// 用let修复
for (let j = 0; j < 3; j++) {
  document.getElementById('btn' + j).onclick = function() {
    alert(j);
  };
}

// 兼容旧环境的IIFE写法
for (var j = 0; j < 3; j++) {
  (function(k) {
    document.getElementById('btn' + k).onclick = function() {
      alert(k);
    };
  })(j);
}

4. 简化r.js构建配置排查隐藏项 #

有时候即使设置了optimize: "none"，其他配置项（比如findNestedDependencies、wrap）也可能悄悄修改代码结构。你可以先把配置简化到最基础：

({
  baseUrl: '.',
  name: 'main',
  out: 'built.js',
  optimize: 'none',
  findNestedDependencies: false,
  wrap: false
})

重新构建后如果问题消失，再逐个加回之前的配置项，就能定位到哪个选项导致的问题。

最后建议你把合并后的代码和原代码做逐段对比，重点看for循环相关的变量定义、模块顺序、闭包部分，差异点往往就是bug的根源。

内容的提问来源于stack exchange，提问作者Michael La Voie