Делитесь библиотекой angular между несколькими проектами

Я работаю над проектом angular 7+, который состоит из бэкэнда + внешнего интерфейса. Теперь я столкнулся с требованием, где мне нужно создать еще один проект, который состоит из внешнего интерфейса + внутреннего интерфейса. Но есть некоторый код многократно используемого внешнего интерфейса, который можно повторно использовать в обоих приложениях.

Структура моего проекта

Здесь

Требование

Здесь

Поэтому, когда я читал о концепциях библиотек, я мог найти

1) Создайте два внешних приложения и используйте общую библиотеку

Я не могу использовать этот подход, так как использую проект шаблона asp.net angular, созданный через визуальную студию (как показано Здесь). Два приложения (Project One и Project Two) имеют свои собственные FE+BE. Следовательно, я не могу сгруппировать два приложения FE в одной папке и заставить их использовать общую библиотеку.

2) Создайте библиотеку и загрузите ее в npm и используйте в качестве зависимости

Я не могу использовать этот подход, поскольку код является собственностью и не может использоваться за пределами сети. Также нет локального корпоративного реестра npm для использования корпоративного npm.

Я знаю, что это можно сделать, используя концепцию библиотеки. Но я не понимаю, как это можно сделать в нескольких приложениях. Может ли кто-нибудь помочь с решением для этого. Спасибо !


person Vikhyath Maiya    schedule 13.05.2019    source источник


Ответы (3)


Учитывая сценарий каталога, который вы упомянули в своем OP, вы можете добавить свою библиотеку по локальному пути, как указано в документах NPM: Локальные пути:

- Root
|
 -- Project One 
|
 -- Project Two
|
 -- Library usued across both projects

Например, в package.json проекта Project One вы можете добавить библиотеку как зависимость:

"dependencies" : {
  "my-shared-library" : "file:../Library usued across both projects",
}

P.S. Я не уверен, разрешены ли пробелы в имени папки библиотеки, но вы можете попытаться выяснить это. Но я предполагаю, что вы все равно не будете использовать пробелы.


Альтернативное решение и дальнейшие планы

2) Создайте библиотеку и загрузите ее в npm и используйте в качестве зависимости. Я не могу использовать этот подход, поскольку код является проприетарным и не может использоваться за пределами сети. Также нет локального корпоративного реестра npm для использования корпоративного npm.

Это не совсем точно. Вы действительно можете использовать этот подход в качестве альтернативного решения или если считаете, что можете использовать эту библиотеку в будущем в другом проекте. Есть один способ сделать это, как указано в документации NPM: URL-адреса Git как зависимости.

package.json

"dependencies" : {
  "my-shared-library" : "Git repo address here. There are various ways to specify an address. See below.",
}

Как добавить библиотеку в качестве зависимости

  • Предположим, вы создали новый репозиторий для этой библиотеки:
"dependencies" : {
  "my-shared-library" : "git+ssh://[email protected]/my-shared-library.git",
}

Таким образом, вы даже можете использовать разные версии вашей библиотеки. Допустим, вы разрабатываете новую версию (т.е. 4.2.0) своей библиотеки для Project One и она не готова или не должна использоваться Project Two, в package.json из Project One вы можете добавить ее следующим образом:

"dependencies" : {
  "my-shared-library" : "git+ssh://[email protected]/my-shared-library.git#branch-v4.2.0",
}
  • В качестве альтернативы вы можете создать новую ветку, скажем, branch-for-my-shared-library, в текущем репозитории (при условии, что оба Project One и Project Two помещены в один и тот же репозиторий):
"dependencies" : {
  "my-shared-library" : "git+ssh://[email protected]/my-current-project.git#branch-for-my-shared-library",
}

Также обратите внимание, что есть несколько протоколов, которые вы можете указать в URL-адресе, как указано в документе:

Протокол может быть одним из git, git+ssh, git+http, git+https или git+file.

Дополнительные примечания:

Удачного кодирования.

person Community    schedule 22.05.2019

Вы можете использовать ссылку npm.

Ссылка npm в папке пакета создаст символическую ссылку в глобальной папке {prefix}/lib/node_modules/, которая ссылается на пакет, в котором была выполнена команда npm link.

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

npm link

Затем вы можете перейти в проект, где вы хотите использовать библиотеку, и ввести:

npm link <project-name>

Где <project-name> — это имя, присутствующее в файле package.json.

Этого будет достаточно. Если вы хотите поделиться библиотекой в ​​сети, не копируя и не вставляя исходный код, ну, может быть, лучше попросить вашу компанию оплатить приватный репозиторий :)

person Cristian Traìna    schedule 13.05.2019
comment
Я полагаю, это будет работать только для локальной разработки с ng serve. Как будет работать сборка в этом случае. Поправьте меня, если я ошибаюсь. - person Vikhyath Maiya; 13.05.2019
comment
В сборке используется веб-пакет, который получает все необходимые файлы из папки node_modules и упаковывает их в уникальный пакет. Неважно, как эти файлы попали в папку node_modules, главное, чтобы они были там в момент запуска сборки — теоретически вы могли бы написать их вручную - person Cristian Traìna; 13.05.2019
comment
Хм, я все еще не понимаю, как это работает в CI, и будет ли создан пакет. Я это попробую. Спасибо - person Vikhyath Maiya; 14.05.2019

1). Вы можете попробовать использовать пакет npm для своей библиотеки:

"scripts": {
   ...
   "build_lib": "ng build --prod example-lib",
   "npm_pack": "cd dist/example-lib && npm pack",
   "package": "npm run build_lib && npm run npm_pack"
}

2) После запуска «npm pack» сгенерированный файл будет выглядеть так: example-lib-0.0.1.tgz

3) Вы можете установить из другого проекта, используя: npm install ../{some-paths}/example-lib/dist/example-lib/example-lib-0.0.1.tgz

Подробнее читайте здесь: https://blog.angularindepth.com/creating-a-library-in-angular-6-part-2-6e2bc1e14121

person katwhocodes    schedule 13.05.2019
comment
Хм интересно. Я попробую это. - person Vikhyath Maiya; 13.05.2019
comment
мы реализовали этот способ для нашего проекта, но было бы здорово узнать, есть ли варианты получше. Пожалуйста, дайте мне знать, если вы их найдете. Спасибо. - person katwhocodes; 13.05.2019
comment
Это решение нормальное, но хакерское, потому что вам придется выполнять множество ручных задач в своем терминале или писать собственные сценарии. - person Patrick Hillert; 09.10.2019
comment
вы можете запустить пакет в предварительной сборке, например prebuild: npm run package. поэтому всякий раз, когда вы запускаете сборку npm run, она будет запускаться до этого - person katwhocodes; 09.10.2019