Угловое 6 здание библиотеки с активами

Ответ 1

В настоящее время я до сих пор не нашел официального встроенного способа сделать это.

Я открыл проблему с Угловой CLI и, надеюсь, получит ответ команды CLI.

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

В package.json я добавил:

"scripts": {
    ...
    "build": "ng build lib1 --prod && scss-bundle -c scss-bundle.config.json && cp -R projects/lib1/src/assets/ dist/lib1/assets/",
}

Чтобы скопировать файлы SASS, я использую scss-bundle с конфигурационным файлом scss-bundle.config.json который содержит:

{
  "entry": "./projects/lib1/src/assets/style/main.scss",
  "dest": "./dist/lib1/assets/style/styles.scss"
}

Это создаст файлы SASS проекта в 1 файл и скопирует их в папку dist. Моя файловая структура SASS выглядит примерно так:

-- projects/lib1/src/assets/
                  -- style
                     -- main.scss
                     -- partials
                        -- _variables.scss
                        -- _styles.scss
                        __ _rtl.scss

Так что, как вы видите, я не хочу отправлять все сырые сасы, только один окончательный файл. Конечно, вы также можете скомпилировать его в файл .css.

Чтобы убедиться, что все другие активы скопированы, я использую простую команду Mac OS/Linux cp -R или rsync.

И, конечно же, вместо запуска ng build я npm run build.

Надеюсь, что это поможет, и если у вас есть лучшее решение, пожалуйста, дайте мне знать.

Ответ 2

Похоже, что в будущем все это можно будет автоматизировать с помощью CLI, однако на данный момент существует несколько решений. Некоторые из них занимались написанием сценария после установки, который очень хорош, если у вас есть куча вещей, которые происходят. Одна включает в себя перемещение их вручную, но это слишком открыто для ошибки IMO. Я также видел пару пакетов npm, которые вы можете установить и которые расширяют возможности ng-packagr (ng-packagr создает ваши библиотеки, а webpack - ваши приложения).

Некоторые из них хорошие, а некоторые плохие, ИМО, я не буду вдаваться в то, что я думаю о них по отдельности, а просто поделюсь тем, что я делаю.

Я работаю над корпоративным приложением Angular и извлекаю наши функции и функции в библиотеки, чтобы в ближайшем будущем мы могли начать совместное использование кода с мини-приложениями. Из-за наших процессов и протоколов сборки мы уже не используем ng cli напрямую для создания наших проектов, вместо этого мы используем сценарии npm.

Если вы уже знакомы со скриптами NPM, пропустите их ниже, в противном случае эта заметка будет очень полезна.

С помощью Angular CLI вы запускаете что-то вроде этого...

ng build myProject --configuration=production, чтобы запустить prod build вашего проекта.

ng build myLibrary, чтобы запустить сборку prod вашей библиотеки, и вы, вероятно, запускаете ng build myLibrary --watch=true, чтобы запустить сборку dev вашей библиотеки и наблюдать за изменениями, пока вы работаете над библиотекой.

Для меня, пока я работаю над проектом, я использую интерфейс командной строки ng, как и вы, и запускаете ng build myLibrary --watch=true

Это работает отлично. У меня есть папка ресурсов для моих библиотек, которые содержат ресурсы, и я храню их в myProject/src/lib/assets. Все хорошо. Хотя мои ресурсы не находятся в моей dist/myLibrary... но это круто, потому что во время разработки, когда я использую относительный путь в моих тегах изображений, <img> веб-пакет извлекает из моего библиотечного проекта, а не из моей папки 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",

Да, это просто базовый удар :)

Я сломаю это для тех, кто плохо знаком с командной строкой все же.

myLibrary:prod Это имя сценария npm, также известного как сценарий запуска npm. Вы вызываете это в командной строке с npm run myLibrary:prod и позволяете вашему терминалу делать все остальное. "Остальные" - это просто команды, которые ваш компьютерный терминал может читать, интерпретировать и выполнять соответствующим образом.

ng build myLibrary запускает стандартную команду сборки CLI ng, тем самым собирая вашу библиотеку

&& это говорит: "Эй, после того, как ты сделаешь что-то слева от меня [& amp;], сделай это справа от меня"

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.

1. cp это "копия"
2. -R предназначен для "рекурсивного", то есть взять все файлы и папки и сохранить их одну и ту же структуру после копирования.
3. projects/myLibrary/src/lib/assets/ Здесь мои активы, которые я хочу переместить в тот новый каталог, который я создал с помощью предыдущей команды mkdir ранее.
4. dist/myLibrary/lib/assets/ является местом назначения для команды копирования.

Итак, с этим у вас есть...

1. Команда cp -R
2. Цель path/to/assets/in/library/project/
3. Пункт назначения 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",
    }
}

Бум идет динамит!