Как разделить код между несколькими проектами с помощью angularJS

Мне было интересно, что было бы лучше всего использовать общие библиотеки и собственные модули между несколькими проекциями angularJS.

Предположим, что я работаю над двумя разными проектами. Оба полагаются на библиотеки, такие как angularJS, bootstrap и т.д.

У меня есть файловая структура, как показано ниже:

Проект 1
index.html

CSS

JS
модуль A

модуль B

Lib
angular

самозагрузки

Проект 2
index.html

CSS

JS
модуль B

модуль X

Lib
angular

самозагрузки

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

Общий
angular

самозагрузки

модуль B

Проект 1
index.html

CSS

JS
модуль A

Проект 2
index.html

CSS

JS
модуль X

У меня есть модуль B, написанный как:

angular.module("moduleB", [])
    .service("SB", [function () {/*functionality here*/}]);
    .factory("FB", [function () {/*functionality here*/}]);

и затем включить его в мой проект 1/2 как зависимость, например:

angular.module("project1", ["moduleB"]);

для достижения этого подхода.

Это лучший способ? Что может быть альтернативой?

Ответ 1

Вы можете сделать это таким образом, но это может дать вам головные боли, если вы хотите, чтобы Project 1 и Project 2 использовали две разные версии общих компонентов. Представьте, что вам нужно выпустить Project 1 с последними разделяемыми компонентами, но Project 2 все еще полагается на предыдущую версию общих компонентов. Какой беспорядок. Некоторые другие варианты:

Составить компоненты компонента Bower, которые могут быть включены в любой проект в качестве зависимостей (см. http://briantford.com/blog/angular-bower)
Скомпилируйте все общие ресурсы во взаимно доступный URL (см. https://medium.com/@KamilLelonek/sharing-templates-between-angular-applications-b56469ec5d85)
В основном копировать/вставлять компоненты между проектами либо вручную, либо используя что-то вроде gulp (см. https://groups.google.com/forum/#!msg/angular/TxE5yoQkG-U/6-vWAZsqn1YJ)

Второй вариант содержит много движущихся частей и требует изменений в ваших приложениях, не говоря уже о невозможности развернуть разные версии общего кода в каждом проекте. Первое преимущество состоит в том, чтобы легко срезать три хранилища: проект 1, проект 2 и общий доступ. Если Shared является зависимостью Bower в Project 1 и Project 2, простой bower update получит последнюю версию в любом проекте. Или вы можете заблокировать проект для определенных версий Shared.

Вариант 3 кажется, что он дает вам максимальный контроль, но вы быстро потеряете информацию о том, какую версию Shared использует ваш проект. Вариант 1 разрешает это.

Ответ 2

Еще один потенциальный вариант - опубликовать ваш общий код как модули npm. Если код является закрытым, вы можете использовать npm Private Modules, хотя есть затраты на использование частных модулей.

С помощью этого или подхода Bower, описанного в d.jamison, попробуйте разбить свои модули на более мелкие модули в зависимости от их конкретных целей, вместо того, чтобы иметь большие монолитные "Shared" модули.

Преимущество состоит в том, что если вы обнаружите ошибку или сделаете улучшение, вы можете более легко увидеть, какие именно из ваших проектов могут быть затронуты. Синтаксис require или ES2015 import очень помогает в этом, так как вы будете говорить, например. import { calculateLineTotal } from OrderLogic.js, поэтому тогда тривиально найти все места в коде, которые повлияют на изменение calculateLineTotal.

Ответ 3

Другой вариант: использовать бит.

Он позволяет обмениваться компонентами из вашего проекта NG в общую коллекцию и использовать их в других проектах - без установки новых библиотек/пакетов.

Желаем удачи.