如何配置ember-cli >=3版本使用原生async/await与生成器（无需Babel兼容处理）

嘿，我刚好折腾过这个配置，给你一步步拆解具体实现方案：

• 确认并升级Ember CLI版本
  首先确保你的Ember CLI版本≥3.0.0，在终端运行：

  ember --version
  

  如果版本低于3，全局升级执行：

  npm install -g ember-cli@latest
  

  项目内局部升级执行：

  npm install ember-cli@^3.0.0 --save-dev
  

• 调整Babel核心配置
  打开项目根目录的ember-cli-build.js，修改Babel相关配置，禁用regenerator转译并指定支持原生async/await的目标浏览器：

  module.exports = function(defaults) {
    let app = new EmberApp(defaults, {
      babel: {
        // 排除regenerator转译插件，避免生成冗余polyfill代码
        exclude: ['transform-regenerator'],
        // 配置@babel/preset-env，精准指定目标环境特性支持
        presets: [
          [
            '@babel/preset-env',
            {
              targets: {
                // 可根据业务需求调整，示例为支持最近2个版本的现代浏览器
                browsers: ['last 2 versions', 'not ie <= 11']
              },
              useBuiltIns: 'usage',
              corejs: 3 // 适配corejs版本，避免不必要的polyfill注入
            }
          ]
        ]
      }
    });
  
    return app.toTree();
  };
  

• 清理多余依赖
  检查项目的package.json，如果存在regenerator-runtime这类冗余依赖，直接移除：

  npm uninstall regenerator-runtime --save
  

• 验证配置效果
  写一段测试代码验证原生特性是否生效，比如在某个路由或组件中添加：

  // 测试async/await语法
  async loadData() {
    try {
      const response = await fetch('/api/sample-data');
      const data = await response.json();
      this.set('model', data);
    } catch (error) {
      console.error('数据加载失败:', error);
    }
  }
  
  // 测试生成器函数
  function* numberGenerator() {
    yield 1;
    yield 2;
    return 3;
  }
  

  运行ember serve启动项目，打开浏览器开发者工具查看打包后的代码，确认没有出现regenerator相关的polyfill代码，且async/await保持原生语法未被转译。

补充说明：如果你的项目需要兼容更老的浏览器，可以调整targets.browsers的配置，但如果只面向现代浏览器（Chrome、Firefox、Edge、Safari最新2-3个版本），上面的配置完全足够——这些浏览器都原生支持async/await和生成器函数。

内容的提问来源于stack exchange，提问作者Jan Míšek