Похоже, что в будущем все это можно будет автоматизировать с помощью CLI, однако на данный момент существует несколько решений.Некоторые из них занимались написанием сценария после установки, который очень хорош, если у вас есть куча вещей, которые происходят.Одна включает в себя перемещение их вручную, но это слишком открыто для ошибки IMO.Я также видел пару пакетов npm, которые вы можете установить и которые расширяют возможности ng-packagr (ng-packagr создает ваши библиотеки, а webpack - ваши приложения).
Некоторые из них хороши, а некоторые -плохо, IMO, я не буду вдаваться в то, что я думаю о них по отдельности, я просто поделюсь тем, что я делаю.
Я работаю над корпоративным Angular Application и извлекаю наши функции и возможности вБиблиотеки, чтобы мы могли начать совместное использование кода с мини-приложениями в ближайшем будущем.Из-за наших процессов и протоколов сборки мы уже не используем ng cli напрямую для создания наших проектов, вместо этого мы используем сценарии npm.
Если вы уже знакомы со сценариями NPM, пропустите ниже, в противном случае,эта быстрая заметка будет очень полезна.
С Angular CLI вы запускаете что-то вроде этого ...
ng build myProject --configuration=production для запуска сборки проекта вашего проекта.
ng build myLibrary, чтобы запустить сборку prod вашей библиотеки, и вы, вероятно, запускаете ng build myLibrary --watch=true, чтобы запустить сборку dev вашей библиотеки и следить за изменениями, пока вы работаете над библиотекой.
Для меня, пока яработать над проектом, я использую CLI ng, так же, как вы делаете и запускаете ng build myLibrary --watch=true
Это работает отлично.У меня есть папка ресурсов для моих библиотек, которые содержат ресурсы, и я храню их в myProject / src / lib / assets.Все хорошо.Мои ресурсы находятся не в моей dist / myLibrary ... но эй, это круто, потому что во время разработки, когда я использую относительный путь в своих тегах изображений, <img> webpack извлекает из моего библиотечного проекта, а не из моей папки dist в любом случае.Так как мне решить это с помощью сценария NPM?Ну, когда вы читаете следующую строку, вы собираетесь чмокнуть себя в лоб и сказать: «Дерьмо, я знал, что» ... вот и все ...
ЕСЛИ ПРОПУСТИТЬ, НАЧАТЬ ЗДЕСЬ ...
"myLibrary:prod": "ng build myLibrary && mkdir dist/myLibrary/lib/assets && cp -R projects/myLibrary/src/lib/assets/ dist/myLibrary/lib/assets/ && npm run msgAssetsCopied",
Да, вот и все, просто базовый bash:)
Я разобью его для тех, кто новичок в командехотя строка.
myLibrary:prod Это имя сценария npm, также известного как сценарий запуска npm.Вы вызываете его в командной строке с помощью npm run myLibrary:prod, и ваш терминал сделает все остальное.«Остальные» - это просто команды, которые ваш компьютерный терминал может читать, интерпретировать и выполнять соответственно.
ng build myLibrary это запускает стандартную команду сборки CLI ng, таким образом собирая вашу библиотеку
&& thisговорит «эй, после того, как вы сделаете что-то слева от меня [&&], сделайте это справа от меня»
mkdir dist/myLibrary/lib/assets это базовая команда bash, которая создает каталог, которым вы будетекопирование ваших активов в.mkdir создает каталог, а путь указывает, где и что я хочу, чтобы этот каталог был.Если бы я находился в папке, я хотел создать каталог, скажем, «foo», я бы сделал mkdir bar, который дал бы мне foo/bar, если бы я был в «foo» и хотел, чтобы каталог «tacos» находился вКаталог "bar", я бы сделал mkdir bar/tacos, и он создал бы "tacos" в каталоге "bar", например foo/bar/tacos.
. Я предпочитаю создавать папки и перемещать ресурсы из a -> b,вместо того, чтобы пытаться скопировать папку и ее активы.
cp -R projects/myLibrary/src/lib/assets/ dist/myLibrary/lib/assets/ этот разделен на 4 части для новичков в bash.
cp это "копия" -R предназначен для«рекурсивный», то есть взять все файлы и папки и сохранить их одну и ту же структуру после копирования. projects/myLibrary/src/lib/assets/ Именно здесь мои активы и я хочу перейти в тот новый каталог, который я создал с помощью предыдущегоmkdir команда ранее. dist/myLibrary/lib/assets/ является местом назначения команды копирования.
Так что с этим у вас есть ...
- Команда
cp -R - Цель
path/to/assets/in/library/project/ - Пункт назначения
path/to/desired/directory/in/build
Последний шаг - npm run msgAssetsCopied, который является еще одним сценарием npm в моем package.json, который сообщает человеку, стучащему по клавиатуре, что ресурсы были скопированы.В моих сценариях обычно есть сообщения с эмодзи, чтобы разработчику было легче увидеть, где именно находится сценарий в любой момент времени, путем определения смайликов на экране.Например ...
"msgAssetsCopied": "echo '? Assets Copied to Library Dist Folder ?'",
Так что ? Assets Copied to Library Dist Folder ? будет напечатано в терминале, когда мы закончим.
Все еще новенький?Не беспокойтесь, сейчас я покажу вам, куда они идут в вашем package.json.
{
"name": "YourWorkspace",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
}
}
Как видите, это верх вашего файла package.json.Вы можете добавить столько скриптов, сколько вам нужно, ниже мы добавим тот, которым я только что поделился ...
{
"name": "YourWorkspace",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"myLibrary:prod": "ng build myLibrary && mkdir dist/myLibrary/lib/assets && cp
-R projects/myLibrary/src/lib/assets/ dist/myLibrary/lib/assets/ && npm run
msgAssetsCopied",
}
}
Boom идет динамитом!