React+TypeScript类中Generator方法在Webpack项目中失效求助

1. 检查Webpack对Generator语法的支持 #

Generator函数依赖ES6+的Generator特性，Webpack默认配置可能未正确转译该语法：

• 安装并启用Babel插件：确保项目安装@babel/plugin-proposal-generators和@babel/plugin-transform-runtime，在Babel配置文件（如.babelrc）中添加：

  {
    "plugins": [
      "@babel/plugin-proposal-generators",
      ["@babel/plugin-transform-runtime", { "regenerator": true }]
    ]
  }
  

• 修正TypeScript配置：在tsconfig.json中设置target为ES6或更高版本，同时确保lib包含ES2015：

  {
    "compilerOptions": {
      "target": "ES6",
      "lib": ["ES2015", "DOM"]
    }
  }
  

2. 确认Generator函数的调用方式 #

Generator函数调用后返回的是迭代器对象，直接调用不会执行内部逻辑，必须通过遍历触发：

// 错误调用（无任何输出）
tree.preOrderTraversal();

// 正确方式1：使用for...of循环
for (const node of tree.preOrderTraversal()) {
  console.log(node);
}

// 正确方式2：手动迭代
const iterator = tree.preOrderTraversal();
let res = iterator.next();
while (!res.done) {
  console.log(res.value);
  res = iterator.next();
}

3. 排查Webpack生产模式的代码优化 #

如果Webpack设置为production模式，代码压缩插件可能误将Generator函数判定为死代码并移除：

• 临时切换到development模式测试，看功能是否恢复；
• 若生产环境需保留，配置terser-webpack-plugin禁用相关消除规则：

  const TerserPlugin = require('terser-webpack-plugin');
  module.exports = {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            keep_fnames: true,
            keep_classnames: true
          }
        })
      ]
    }
  };
  

4. 检查类方法的this绑定 #

确认insert方法的this指向正确，避免因上下文丢失导致逻辑不执行：

class Tree {
  // 方式1：使用箭头函数绑定this
  insert = (node: TreeNode) => {
    // 你的插入逻辑
  };

  // 方式2：在构造函数中手动绑定
  constructor() {
    this.insert = this.insert.bind(this);
  }
}

5. 调试Generator函数内部逻辑 #

在Generator函数内部添加debugger语句，通过浏览器开发者工具断点调试，确认是否进入函数执行流程：

function* preOrderTraversal() {
  debugger; // 在此处断点
  yield this.root;
  // 后续遍历逻辑
}

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