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

Лучше всего создать пакет npm всех повторно используемых ресурсов.

Создание пакета npm для размещения ваших ресурсов очень выгодно по нескольким причинам:

  1. Интегрировать ресурсы для всех ваших проектов очень просто. Все, что вам нужно сделать, это запустить npm install ‹имя пакета›, и все они будут интегрированы в ваш проект.
  2. Добавление новых ресурсов будет обновляться во всех проектах. Если вам нужно добавить классы CSS или изменить тип шрифта для разных заголовков, изменение этого параметра позволит всем проектам получать это обновление при выполнении обновления npm. 4
  3. Пакет может использоваться как зависимости для других пакетов. Допустим, в будущем вы выпускаете пакет, в котором есть набор компонентов Angular, которые можно использовать во всех ваших приложениях. Вы можете создать этот пакет отдельно и сделать так, чтобы этот пакет зависел от вашего пакета ресурсов, что избавит вас от необходимости беспокоиться о том, что в вашем приложении отсутствуют стили.

Как создать пакет NPM

Создать пакет npm очень просто! Все пакеты npm действительно состоят из одного файла package.json, который содержит все метаданные, необходимые для распознавания пакета.

Чтобы создать его, создайте новую папку, в которой вы хотите разместить свой проект. Перейдите в эту папку и запустите npm init. Это задаст вам ряд вопросов, которые будут использоваться для заполнения файла package.json.

После завершения ваш файл package.json будет выглядеть примерно так:

{
    "name": "<package name>",
    "version": "1.0.0",
    "description": "<description>",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "<author>",
    "license": "ISC"
}

Добавление файлов в ваш пакет npm

Затем вам понадобится способ добавить файлы в свой пакет. Эта часть так же проста.

Поместите все свои активы в структурированном формате внутри папки. Разделите файлы таблиц стилей, шрифты, изображения и т. Д. Скопируйте эту папку в папку вашего пакета.

Откройте файл package.json и добавьте следующее поле:

"files": [
    "/<folder name>"
]

Это значение добавляет все файлы, которые должны быть включены в пакет при его установке в качестве зависимости. Размещение имени папки здесь будет включать все содержимое внутри папки, когда кто-то установит ваш пакет.

Это оно! На данный момент ваш пакет настроен и готов к установке. Вы можете перейти в свой проект Angular и установить его, запустив:

npm install C:/path/to/package/folder

Добавление стилей в проект Angular

Это просто касается установки пакета в ваш проект, но как ваш проект на самом деле распознает стили? Что ж, вам придется их импортировать! Не бойтесь, это тоже непрерывный процесс.

Есть два способа импортировать стили в ваш проект:

  1. angular.json: вы можете добавить путь к стилям внутри файла angular.json вашего проекта. Откройте его и найдите поле с именем styles. У вас уже должно быть значение по умолчанию (styles.scss или styles.css). Чтобы добавить свои файлы CSS, просто добавьте пути к ним в этот список. Ваш путь обычно будет node_modules / ‹имя пакета› / ‹папка ресурсов› / ‹файл CSS›.
  2. styles.scss: вы также можете добавить путь к самому файлу styles.scss или styles.css. Просто откройте его и импортируйте, используя @import node_modules / ‹имя пакета› / ‹папка ресурсов› / ‹файл CSS›.

Публикация вашего пакета

Лучший способ разместить ваш пакет - через онлайн-репозиторий. Публикация вашего пакета сделает его доступным через npm-registry, который является общедоступным репозиторием, в котором размещены тысячи пакетов.

Существуют также другие сторонние хосты пакетов, в том числе GitHub Packages и Artifactory. Любой из них выгоден, пока пакет доступен для загрузки. Вы также можете разместить свой пакет в частной зависимости.

Забрать

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

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