如何在没有模块支持的情况下使用 ember.js答案

【问题标题】：How to use ember.js without module support如何在没有模块支持的情况下使用 ember.js
【发布时间】：2015-12-02 14:30:17
【问题描述】：

ember.js 的指南假设一个具有完整的 ES6 支持，例如http://guides.emberjs.com/v2.2.0/routing/specifying-a-routes-model/ 显示使用 export default 构造，并没有指定任何替代方法来实现目标。然而，模块功能并未在 ember 支持的所有浏览器中实现。

如何在不支持模块的浏览器中使用这些功能？这些示例中的代码将如何转换为 ES5？

【问题讨论】：

标签： javascript ember.js compatibility ecmascript-6 ecmascript-5

【解决方案1】：

文档假定您使用的是转译工具，因为推荐的工具 ember-cli 可以。除非您有充分的理由不使用它，否则您绝对应该研究一下。

但是，没有它也可以正常工作。例如，如果没有模块系统，Ember 会将controller:posts.index 映射到App.PostsIndexController。所以这应该适用于您链接的示例：

App.Router.map(function() {
  this.route('favorite-posts');
});

App.FavoritePostsRoute = Ember.Route.extend({
  model() {
    return this.store.query('post', { favorite: true });
  }
});

您也可以将 Ember 与您自己的模块支持一起使用。我成功地拥有了一个基于 rollup 的 Ember 项目。不过，要让resolver 找到您的类确实需要更多的工作（该解析器链接还记录了 ember 如何关联名称映射）。没什么难的，但您必须构建一个简短的脚本来生成注册。

为 blessenm 编辑： 带有汇总的 Ember

很遗憾，我无法共享此代码，但它的工作原理如下：

脚本扫描项目目录并通过在遇到的每个 .hbs 文件上调用 ember-template-compiler.js 来编译模板。
一个脚本（实际上是同一个）扫描项目目录并生成主入口点。这很简单，如果它看到gallery/models/collection.js 和 `gallery/routes/picture.js'，它会生成一个如下所示的主文件：
```
import r1 from 'gallery/models/collection.js';
import r2 from 'gallery/routes/picture/index.js';
// ...
Ember.Application.initializer({
    name: 'registrations',
    initialize: function (app) {
        app.register("model:collection", r1);
        app.register("route:picture.index", r2);
        // ...
    }
});
```
它应该只是将您的文件名映射到解析器名称。作为奖励，您可以控制目录的组织方式。
对生成的文件调用汇总。它将把所有东西放在一起。我使用 IIFE 导出格式，跳过了所有运行时解析的混乱。我建议你设置 rollup to work with babel 这样你就可以使用 ES6 语法了。

我不使用任何特定于 ember 的模块，但添加起来应该不会太难。我的猜测是，这主要是正确设置汇总导入分辨率的问题。据我所知，它可能开箱即用。

【讨论】：

你的代码在 github 上吗？只是想看看你是如何让它与 rollup 一起工作的。
@blessenm 我编辑了答案，详细说明了它的工作原理。不幸的是，该项目不是公开的，所以我无法显示代码本身。无论如何，我希望它有所帮助。您可能还想在 Ember 论坛上阅读 this post。您还可以查看this project 如何使用 webpack 集成 Ember 项目。不同的工具，但方法相同。
感谢您的回复。将通过它们并弄清楚。我想知道您使用汇总有哪些明显的好处？与使用 ember-cli 相比，您的构建输出大小是否？
控制构建过程是主要原因。它更好地集成到我们的全球工作流程中，其中 Ember 应用程序只是其他应用程序的一部分。核心项目在 python 中，资产也在 python 中处理（实际上我为 Ember 编写的脚本是在 python 中，调用 nodejs 的关键步骤）。像许多 JS 项目一样，ember-cli 假设它控制着一切，并且没有一个干净的解决方案来与世界其他地方集成。这就是我选择自己进行集成的原因。
...（续）现在，在 JS 方面，由于 IIFE 格式的简单性以及名称解析是在构建时完成的事实，而不是在运行。有数百个文件，所有内部定义/要求都加起来了。你失去了增量构建功能，但另一方面，在我的笔记本电脑上构建 500 多个文件的时间不到 1 秒。不过，我坚持认为主要原因是构建过程。 ember-cli 提供的便利性大大超过了其他好处。

【解决方案2】：

您应该考虑使用 Ember CLI http://ember-cli.com/

您在 ES6 中编写代码，然后将其转换为 ES5。

【讨论】：