Как перейти от модуля модуля AngularJS к модулям ES6

70
4

У нас есть проект, который использует ES5 и полагается на систему модулей Angular 1.x. Я видел множество руководств, которые говорят "Шаг первый: переписывайте все", но это не очень оптимально для большой кодовой базы, которая меняется ежечасно.

Есть ли способ сделать это болезненное изменение несколько более частным? Из того, что у меня есть, может быть проще полностью перейти на Angular 2+, а не получить преимущества ES6, используя Angular 1.x.

Моя первоначальная мысль заключалась в том, чтобы добавить операторы импорта (закомментированные, чтобы не сломать сборку) в верхней части каждого файла, при этом используя систему угловых модулей. Таким образом, каждый модуль ES6 содержит модуль AngularJS. Когда все файлы имеют это, мы раскомментируем импорт и изменим систему сборки на webpack. Затем мы можем пройти один за другим, а ES6-ify - фактический код, поскольку у нас есть время.

спросил(а) 2017-10-02T18:49:00+03:00 3 года назад
1
Решение
71

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

В настоящее время я переношу другое приложение AngularJS, гораздо большее, в современную структуру. Хорошая новость заключается в том, что с осторожностью и осторожностью нет причин не запускать две системы SPA одновременно в такой переходный период. Например, вы можете загружать Aurelia внутри приложения AngularJS, и если вы отделите свое управление от состояния (например, используя Redux), компоненты AngularJS и Aurelia могут одинаково хорошо подписаться на ваши хранилища данных.

Большой вопрос, который остается, заключается в том, чтобы переключить рамки? AngularJS отлично подходит для приложений среднего размера, особенно если вы поддерживаете хорошее разделение проблем. Но он падает несколькими путями:

Если вы хотите, чтобы ваше приложение работало плавно на мобильных телефонах и хромовых книгах, вы должны переключиться. AngularJS заметно медленнее, чем современные фреймворки, и требует гораздо большей мощности обработки запросов клиентов. Там также нет хорошего способа реализовать рендеринг на стороне сервера с помощью AngularJS, который также может помочь в производительности мобильных устройств. Если ваше приложение отображает длинные списки или сложные табличные данные, которые необходимо регулярно обновлять, вы должны переключиться. AngularJS не очень хорош в предоставлении большого количества информации сразу, особенно если это необходимо для обновления в реальном времени или если оно сильно взаимосвязано.

Что касается внедрения модулей ES6 для AngularJS, вы можете потратить время на экспорт компонентов и импортировать/зарегистрировать их на модуле AngularJS в отдельном файле, что очень похоже на то, что делает Angular. Но я не уверен, какие преимущества. Что конкретно вы надеетесь достичь с этим?

Если явным образом буду использовать Webpack, я бы согласился с тем, что добавление импорта и экспорта с течением времени является хорошим первым шагом и что вы должны определять свои компоненты и директивы как экспорт в каждом файле.

например

мой-component.js

class MyComponentController { ... }

export var MyComponent = {
bindings: {...},
controller: MyComponentController,
template: '...'
}

main.js

import {MyComponent} from 'my-component'
angular.module('my-module').component('myComponent', MyComponent);

Надеюсь это поможет!

ответил(а) 2017-10-02T19:05:00+03:00 3 года назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема