Angular 1.x: крадущийся webpack, затаившийся grunt

[alexanderlebedev]

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

[hazratgs]

Было бы обидно прочитать такую длинную статью и не получить в конце бонус! Мы прикладываем для вас готовые конфиги для webpack и karma!

ВАУУ, СПАСИБО!!! ВАШЕ КРУТО!!!

[myoffice_ru]

На здоровье:))

[SuperOleg39ru]

Не так давно решал похожую задачу, правда переходили с 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 эффекта не заметили :)

[alexanderlebedev]

Мы также столкнулись с тем, что замена ng-annotate-loader на angularjs-annotate необходима, чтобы начала работать поддержка ES2017 синтаксиса в babel-loader

[Houston]

Если писать модули в формате экспорта функции, необходимо упоминание @ngInject. Если это не сделано, минифицированная версия не работает, а линтерами эту ситуацию не отследить.

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

[serf]

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

[serf]

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

• зависимости описываются только один раз и это просто массив $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'}]}})

[Rockafella]

Похоже настало время написать о нашей сборке :) Мы пошли еще дальше. Теперь убейте karma, заменив ее на mocha и тестируйте все как самый обычный JS код. Все прямые зависимости от angular прекрасно заменяются парой lodash + $q (можно только для тестов). Если про существование angular знает исключительно точка входа в модуль, а все остальное существует как самые обычные функции — жизнь упрощается в разы. И тесты проходят моментально, а не как карма запустится. Осталось сделать пулл-реквест в angular чтобы убрать абзац про «Testability Built-in» :)