Как использовать ember.js без поддержки модуля

Question

Руководства для ember.js предполагают, что у одного есть полная поддержка ES6, например. http://guides.emberjs.com/v2.2.0/routing/specifying-a-routes-model/ показывает, используя конструкцию export default и не указывает альтернативный способ достижения целей. Однако функция модуля не реализована во всех браузерах, поддерживающих ember.

Как я могу использовать эти функции в браузере, который не поддерживает модули? Как код в этих примерах переводится на ES5?

Answer 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 с собственной поддержкой модуля. У меня успешно есть проект Ember, основанный на rollup. Однако для этого требуется немного больше работы, чтобы найти resolver для поиска ваших классов (эта ссылка для распознавателя также содержит документы о том, как относится к ember). Ничего сложного, но вы должны создать короткий скрипт для создания регистрации.

---

РЕДАКТИР blessenm: Ember с накопительным пакетом

К сожалению, я не могу разделить этот код, но он работает так:

1. Скрипт сканирует каталог проекта и компилирует шаблоны, вызывая ember-template-compiler.js на каждые .hbs файл, с которым он сталкивается.

2. Скрипт (тот же самый, фактически) сканирует каталог проекта и генерирует главную точку входа. Это довольно просто, если он видит, скажет gallery/models/collection.js и `Галереи/маршруты/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); 
        // ... 
       } 
   }); 
   

   Он должен просто сопоставить ваши имена файлов решающих имен. В качестве бонуса вы можете контролировать, как организованы ваши каталоги.

3. Вызов накопителя на сгенерированный файл. Он будет тянуть все вместе. Я использую формат экспорта IIFE, пропуская весь беспорядок разрешения во время выполнения. Я предлагаю вам установить rollup to work with babel, чтобы вы могли использовать синтаксис ES6.

Я не использую какой-либо модуль, специфичный для ember, но его не следует добавлять слишком сложно. Я предполагаю, что это в основном вопрос правильной настройки импорта накопителей. Насколько я знаю, это может работать из коробки.

Answer 2

Вы должны смотреть в использовании Ember CLI http://ember-cli.com/

Вы пишете код в ES6 и transpiles до ES5.