如何解决Babel编译时出现的'Uncaught ReferenceError: stringClasses is not defined'错误？

这个问题的根源非常明确：你的newElement原函数中，stringClasses变量没有被显式声明，Babel转译后这个变量变成了未声明的全局变量，在严格模式或者现代浏览器环境中直接抛出引用错误。

步骤1：修复原newElement函数的变量声明问题 #

从Babel转译后的代码反推，你的原newElement函数应该是接收一个标签名和多个类名参数，但在处理类名拼接时漏掉了var/let/const声明stringClasses。修改原函数如下：

function newElement(tagName, ...classNames) {
  const elem = document.createElement(tagName);
  // 显式声明stringClasses，并给reduce加上初始空字符串避免首字符空格
  const stringClasses = classNames.reduce((ac, current) => `${ac} ${current}`, "");
  // 可选：用trim()去掉首尾多余空格
  elem.className = stringClasses.trim();
  return elem;
}

这样修改后，Babel转译时会正确为stringClasses添加变量声明，不会再出现未定义的错误。

步骤2：检查严格模式配置（可选） #

如果你的代码启用了use strict严格模式，未声明的变量会直接抛出错误（而非隐式创建全局变量）。确保你的Babel配置没有意外开启严格模式，或者如果必须使用严格模式，所有变量都必须显式声明。

比如你的.babelrc可以保持常规的env预设配置：

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions"]
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

步骤3：验证编译结果 #

修复原函数后重新运行Gulp任务，转译后的newElement代码会包含stringClasses的变量声明，类似这样：

function newElement(tagName) {
  var elem = document.createElement(tagName);
  var stringClasses;
  for (var _len = arguments.length, classNames = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
    classNames[_key - 1] = arguments[_key];
  }
  stringClasses = classNames.reduce(function (ac, current) {
    return ac + " " + current;
  }, "");
  elem.className = stringClasses.trim();
  return elem;
}

此时再加载页面，stringClasses is not defined的错误就会消失。

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