Comments 10
UFO just landed and posted this here
Было бы обидно прочитать такую длинную статью и не получить в конце бонус! Мы прикладываем для вас готовые конфиги для webpack и karma!
ВАУУ, СПАСИБО!!! ВАШЕ КРУТО!!!
+1
Не так давно решал похожую задачу, правда переходили с Gulp :)
Много идей подчерпнул из отличного шаблона NG6 starter, рекомендую.
По поводу экспорта имени модуля, вы это имели в виду?
Если под автозагрузкой вы имели в виду загрузку модулей по требованию, у нас используется такая схема:
Вместе с роутингом схема выглядит немного сложнее, используется свойство resolve у $stateProvider.
Так же сегодня мигрировали на Webpack 2, трудности возникли только с ngInject — ng-annotate-loader перестал работать, но вместо него отлично подошел babel плагин angularjs-annotate.
Production сборка стала значительно быстрее, а вот от tree shaking эффекта не заметили :)
Много идей подчерпнул из отличного шаблона NG6 starter, рекомендую.
По поводу экспорта имени модуля, вы это имели в виду?
export default angular.module('app.core', [
...
]).name;
Если под автозагрузкой вы имели в виду загрузку модулей по требованию, у нас используется такая схема:
// bundle-loader автоматически оборачивает контент модуля в require.ensure
const handler = require('bundle-loader?lazy!app/components/' + moduleName + '/index.js');
handler((module) => {
// плагин ocLazyLoad регистрирует модуль и его зависимости в angular
$ocLazyLoad.load({ name: module.default });
});
Вместе с роутингом схема выглядит немного сложнее, используется свойство resolve у $stateProvider.
Так же сегодня мигрировали на Webpack 2, трудности возникли только с ngInject — ng-annotate-loader перестал работать, но вместо него отлично подошел babel плагин angularjs-annotate.
Production сборка стала значительно быстрее, а вот от tree shaking эффекта не заметили :)
+1
Если писать модули в формате экспорта функции, необходимо упоминание @ngInject. Если это не сделано, минифицированная версия не работает, а линтерами эту ситуацию не отследить.
Для этого есть ngStrictDi
, обязательно включите. https://docs.angularjs.org/api/ng/directive/ngApp
0
легко ориентироваться по зависимостям модуля при помощи ctr+click
А что меншает допустим также и например сервисы запрашивать в явном виде?
import './careers.component.scss';
import {Component, BaseClass} from '_global_common_angular';
import Crud from './../shared/crud.service';
import Profile from './../profile/profile.service';
@Component({
__filename
})
export default class extends BaseClass {
static $inject = [
Crud.$name,
Profile.$name,
...
constructor(Crud, Profile, ...) {
super({Crud, Profile, ...});
...
PS Я предпочитаю использовать TypeScript пусть даже только как трайспайлер вместо Babel. Он работает немного быстрее, код генерирует более красивый (для меня), тянет меньше npm зависимостей.
0
Теперь ипорт зависимостей выглядит так, что более удобно:
- зависимости описываются только один раз и это просто массив $inject без необходимости соблюдать порядок элементов в массиве
- использование сервисов в более явном/унифицированном виде — по импортированной зависисимости (this.$i[GroupsService.$name])
import './groups-favorite-page.component.scss';
import {Component, BaseClass2Scoped} from '_global_common_angular';
import {GroupsService} from './../groups/groups.service';
@Component({
__filename,
bindings: {
_input: '< input'
}
})
export class GroupsFavoritePageComponent extends BaseClass2Scoped {
static $inject = [
GroupsService.$name,
...BaseClass2Scoped.$inject
];
constructor(...$injections) {
super(...$injections);
this.$s.groups = [];
this.$i[GroupsService.$name]
.requestFavoritePage({sort: {orders: [{property: 'group.title'}]}})
0
Похоже настало время написать о нашей сборке :) Мы пошли еще дальше. Теперь убейте karma, заменив ее на mocha и тестируйте все как самый обычный JS код. Все прямые зависимости от angular прекрасно заменяются парой lodash + $q (можно только для тестов). Если про существование angular знает исключительно точка входа в модуль, а все остальное существует как самые обычные функции — жизнь упрощается в разы. И тесты проходят моментально, а не как карма запустится. Осталось сделать пулл-реквест в angular чтобы убрать абзац про «Testability Built-in» :)
0
Sign up to leave a comment.
Angular 1.x: крадущийся webpack, затаившийся grunt