Насколько это плохо использовать AngularJS + RequireJS?

Question

[vasIvas]

Уже встречал несколько раз упоминание о связки AngularJS + RequireJS, но на сколько это действительно неудачная идея? Ведь RequireJS это же по сути инжектор, который уже существует в angular. Или нет?

Answer 1

[Сергей Протько]

Не совсем, requirejs это менеджер модулей, а контейнер зависимостей в angular для более мелких модулей/сервисов. С другой стороны в angular свой менеджер модулей (angular.module) с ленивой инициализацией и прочими прелестями.

Лично я не вижу никакого профита от использования requirejs + angular (пробовал, не понравилось), как минимум из-за очень жирного синтаксиса require.js. Так как angular не умеет асинхронно подгружать свои модули (приложение должно быть загружено целиком что бы запуститься) профит от AMD еще более сомнителен. browserify и commonjs еще можно попробовать, но опять же с появлением es2015 смысла в этом мало.

В angular2 скажем они отказались от своей системы модулей и полностью перешли на модули из es2015. Я же использую их и в angular1.x проектах к примеру и получаю море удовольствия.

Comments

[vasIvas]

А как мне начать использовать модули из es2015 в первых версиях angular?

[Сергей Протько]

vasIvas: берите и начинайте. Просто в первых версиях ангуляра выйдет небольшая избыточность так как у ангуляра свои модули. Я делаю так:

У меня приложение разбито на много мелких модулей, модули разбиты по папкам, например details, search, core, layout. Последние два - основные. core содержит сервисы которые используются во всем приложении (например обертка над $http, какие-то мелочи типа security layer, по сути core разбит еще на несколько модулей но это уже мелоч. layout - там все что связано с общим оформлением приложения, там у нас базовые шаблоны, директивы и фильтры которые используются повсюду и их нельзя приписать к одному конкретному модулю.

Все файлы модуля лежат рядом (jade, js, less и тесты), все согласно angular styleguide по сути. При использовании es6 модулей есть правда один нюанс. У меня есть файлик, например, core.module.js, и только он что-то знает о ангуляровских модулях. Все остальные файлы просто экспортируют классы и функции, ничего более. А в core.module.js я уже собираю все в ангуляровский модулй, регистрирую сервисы и т.д. Например:

// some.service.js

export default class SomeService {
     
     constructor($http, $q) {
          this.$http = $http;
          this.$q = $q;
     }

     foo () {
          return this.$q((resolve, reject) => {
                // do something
          });
     }
}

// core.module.js
import someFactory from './some.factory.js';
import someService from './some.service.js';
import anotherService from './another.service.js';

angular
    .module('app.core', [])
    .factory({some: someFactory})
    .service({
         some: someService,
         another: anotherService
    })
;

[Сергей Протько]

vasIvas: далее я использую gulp и gulp-babel для транспайлинга модулей и в целом es2015 в es5. Маленькая особенность, babel позволяет использовать разные форматы модулей как целевой формат. Я использую system.js и es6-module-loader в dev окружении. В prod вариантов много, я пока использую es6-module-transpiler но подумываю о чем еще... хотя меня пока устраивает.

[vasIvas]

Сергей Протько: то есть Вы используете babel и "использование модулей" означает прастая компиляция из babel в js?

[Сергей Протько]

vasIvas: нет, модули из es2015 транспайлятся в формат system.js и потом загрузчиком загружается.

https://babeljs.io/docs/usage/modules/#system
https://github.com/ModuleLoader/es6-module-loader

[Сергей Протько]

vasIvas: в проде да, я компилю все в бандл и толку от модулей тут уже меньше.

[Сергей Протько]

Сергей Протько: для компиляции в прод на данный момент лучше использовать esperanto.

[vasIvas]

Сергей Протько: что-то я немного запутался. В параметрах babel указал модуль system. Затем подключил es6-module-loader-dev.js. Но в примере ещё написано что нужно traceur.js.
По этому я скачал traceur-compiler и подключил его перед es6-module-loader-dev.js в index.html. И тут сразу же первая ошибка -

traceur.js:16 Uncaught SyntaxError: Unexpected reserved word

Почему так? И что я делаю не так?

[Сергей Протько]

vasIvas: в примерах к module-loader? да, но оно не нужно.

К примеру я подключаю system.js как-то так:

System.transpiler = 'babel';
System.baseURL = 'app/';
System.import('bootstrap'); // никакого отношения к твиттер бутстрапу не имеет.

[vasIvas]

Сергей Протько: у меня сразу несколько вопросов -
1. если я правильно понял, то 'bootstrap' это одноименный модуль. Но я так и не понял, как так сделать. То есть, 'bootstrap' это название файла? Или это любой файл с

export var bootstrap =     angular.bootstrap(element[, modules]);

Или это -
module angular.bootstrap(element[, modules]);
Как происходит поиск? По названию файла или свойства-метода?
2. Вы подключаете в index.html systemjs?
3. Вы грузите скомпилированные babel'ом модули или нет?
4. Если скомпилированные, то есть ли у Вас там первой строчкой вызов System.register?
У меня есть у скомпилированных файлов, но такого метода нет.
5. Еще что-то нужно подключать к index.js для работы с es6-module-loader?

[Сергей Протько]

vasIvas:

1) да, это название файла по сути.
2) да
3) да, они подгржаются через system.js
4) да
5) да вроде ничего... В тех трех строчках что я описал - первые две - настройка, последняя - действие, загрузить главный модуль.

[vasIvas]

Сергей Протько: а какой-нибудь специальный булдер для systemjs у Вас имеется? У меня у System нет не одного метода, который нужен.

[vasIvas]

Сергей Протько: спасибо Вам большое! Получилось. Снес все и заново поставил и получилось.

[vasIvas]

console.log(angular); // видит

angular.module('app', []).controller('MainController', ($scope)=> {
    $scope.text = 'Hello World!'
});

Вот часть index.html -

<body ng-app="app">
  <div ng-controller="MainController">
    <div>{{text}}</div>
  </div>
  <!--inject:js-->
  <script src="/systemfile.js"></script>
  <!--endinject-->
</body>

systemfile.js это конфиг для systemjs в котором я импортирую main.js -

'use strict';

System.config({
    baseURL: '/',
    traceur: 'babel'
});

System.import('/src/main.js');

Вот.. В хроме вижу что main.js загрузился и так же в консоль выводится объект angularjs, который подтверждает, что подключенный в хеде angular загружается. И все вроде хорошо, но не работает.
Я ничего не пропустил?

[vasIvas]

Справился, bootstrap помог. Но я думал что bootstrap это идентично ng-app в коде...

[Сергей Протько]

vasIvas: да, angular.bootstrap вызывается внутри ng-app.

Answer 2

[Константин Китманов]

RequireJS — это модули. Инжектор в ангуляре — это DI.
Грубо говоря, область ответственности первого — классы, а второго — инстансы этих классов.

Смак именно RequireJS в том, что она не требует этапа сборки в dev-окружении, это неимоверно быстрее, чем любая, даже самая оптимизированная сборка с помощью babel/browserify. В остальном см. ответ Сергей Протько.

Comments

[Сергей Протько]

system.js тоже не требует сборки. а babel только для модулей использовать глупо, потому без трансляции никак.