Как стать автором
Обновить

Комментарии 10

НЛО прилетело и опубликовало эту надпись здесь
ИМХО, для существующих проектов бонусов от миграции webpack 1 -> webpack 2 не так много, чтобы срочно переходить. Там где webpack'а ещё нет, стоит использовать последнюю версию.
Было бы обидно прочитать такую длинную статью и не получить в конце бонус! Мы прикладываем для вас готовые конфиги для webpack и karma!


ВАУУ, СПАСИБО!!! ВАШЕ КРУТО!!!
На здоровье:))
Не так давно решал похожую задачу, правда переходили с Gulp :)

Много идей подчерпнул из отличного шаблона 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 эффекта не заметили :)
Мы также столкнулись с тем, что замена ng-annotate-loader на angularjs-annotate необходима, чтобы начала работать поддержка ES2017 синтаксиса в babel-loader
Если писать модули в формате экспорта функции, необходимо упоминание @ngInject. Если это не сделано, минифицированная версия не работает, а линтерами эту ситуацию не отследить.

Для этого есть ngStrictDi, обязательно включите. https://docs.angularjs.org/api/ng/directive/ngApp

легко ориентироваться по зависимостям модуля при помощи 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 зависимостей.

Теперь ипорт зависимостей выглядит так, что более удобно:


  • зависимости описываются только один раз и это просто массив $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'}]}})
Похоже настало время написать о нашей сборке :) Мы пошли еще дальше. Теперь убейте karma, заменив ее на mocha и тестируйте все как самый обычный JS код. Все прямые зависимости от angular прекрасно заменяются парой lodash + $q (можно только для тестов). Если про существование angular знает исключительно точка входа в модуль, а все остальное существует как самые обычные функции — жизнь упрощается в разы. И тесты проходят моментально, а не как карма запустится. Осталось сделать пулл-реквест в angular чтобы убрать абзац про «Testability Built-in» :)
Зарегистрируйтесь на Хабре , чтобы оставить комментарий