Что такое npm workspaces?

Workspaces (рабочие области) — это набору функций в npm cli, с помощью которого можно управлять несколькими пакетами из единого корневого пакета верхнего уровня. Этот функционал появился с 7й версии. Workspaces упрощают работу с монорепозиториями. Монорепозиторий - это способ организации проекта в котором множество подпроектов хранится в одном и том же репозитории. Workspaces упрощает работу со связанными пакетами. В нем автоматизирован процесс связывания (linking) и нет необходимости вручную использовать npm link для добавления ссылок на пакеты, которые должны быть связаны символическими ссылками в текущую папку node_modules. Каждый отдельный workspaces - это отдельный изолированный модуль, пакет или подпроект.

Создание проекта и workspace’ов

Проинициализируем проект, запустив npm init. Далее добавим в package.json поле workspaces. В это поле добавляем имена workspace'ов. packages/ обозначает, что мы поместим подпроекты в папку packages.

"workspaces": [
  "packages/components",
  "packages/app"
]

Создадим папки packages/components и packages/app и запустим npm init в каждой из них. Получаем такую структуру:

packages/
  app/
    package.json
  components/
    package.json
package.json

Запустим npm install. После запуска npm install папки packages/components и packages/app будут связаны символическими ссылками с node_modules. В результате структура папок будет выглядеть следующим образом:

packages/
  app/
      package.json
  components/
    package.json
node_modules/     // добавилось
  app/            // symlink на ../packages/app
  components/     // symlink на ../packages/components
package.json
package-lock.json // добавилось

Автоматическое создание нового workspace

Для того чтобы не создавать папки самим, можно запустить готовую команду. Добавим еще один подпроект с названием api.

npm init -w ./packages/api

Эта команда автоматически:

• создаст папку api с package.json внутри;
• добавит новый workspace в конфигурацию корневого package.json;
• создаст symlink.

Добавление зависимостей в workspace

Для того чтобы добавить зависимость в определенный workspace нужно указать этот workspace в команде npm install :

npm install lodash -w components

Подобным образом можно запускать команды uninstall, ci и т.д.

Как ссылаться на workspace и использовать его

Воспользуемся функцией из одного workspace’а в другом. Создадим небольшую функцию в пакете components:

// packages/components/index.js

module.exports = {
  toUpperCase: (str) => String(str).toUpperCase()
}

Вызовем эту функцию в пакете app:

// packages/app/index.js

const { toUpperCase } = require('components')

console.log(toUpperCase('hello, world!')) // => 'HELLO, WORLD!'

Запустим скрипт:

node ./packages/app/index.js

Запуск команд в контексте workspace’а

Можно использовать параметр workspace для запуска команд в контексте выбранного пакета. Кроме того, если текущий каталог находится внутри workspace’а, конфигурация workspace’а задается неявно, а префикс устанавливается для корневого workspace’а. Из корня проекта запустим команду start для workspace’а app.

npm run start --workspace=app

Внутри workspace’а можно запустить команду обычном образом.

cd packages/app
npm run start

Аргумент --workspace можно указать несколько раз для запуска команды для нескольких workspace’ов:

npm run start --workspace=app --workspace=api

Для запуска команды в контексте всех workspace’ов нужно указать флаг --workspaces. Эта команда запустит команду start для каждого workspace’а в порядке указанном в поле workspaces в package.json.

npm run start --workspaces

Однако, может оказаться, что не во всех workspace’ах будет определен вызываемый скрипт. Чтобы избежать ошибок npm ERR! Error: Missing script: "start", нужно указать флаг --if-present. В этом случае npm пропустит workspace’ы, в которых вызываемый скрипт не определен.

npm run start --workspaces --if-present

Исходный код

1. Что такое Svelte и как он устроен?

В этом уроке проинициализируем default проект на Svelte и рассмотрим структуру default проекта. Смотреть на Rutube

2. Как устроен Компонент в Svelte?

В этом уроке рассмотрим компоненты Svelte, пропс (props, $$props, $$restProps, export let prop), реактивность SvelteJS, блоки script и style, изоляцию стилей и :global() Смотреть на Rutube

3. Жизненный цикл Svelte компонента

В этом видео рассматриваем методы жизненного цикла компонентов Svelte, а именно onMount, onDestroy, beforeUpdate, afterUpdate, а также функция tick. Смотреть на Rutube

4. HTML шаблоны в Svelte

В этом уроке рассмотрим cинтаксис HTML шаблонов Svelte, а именно if, each, await, key, а также html и debug. Смотреть на Rutube

5. Как работать с событиями в Svelte?

В этом уроке по Svelte рассматриваем работу с событиями в Svelte, а именно директиву on, модификаторы событий, переброс событий, createEventDispatcher и т.д. Смотреть на Rutube

6. Байндинги и Привязки - Svelte Bindings

В этом уроке рассмотрим привязки в Svelte, синтаксис и директиву bind:, привязки к компонентам и т.д. Смотреть на Rutube

7. Хранилище Svelte Store

В этом уроке рассмотрим store в Svelte и разновидности хранилищ: writable store (хранилище для записи), readable store (хранилище только для чтения), derived store (производные хранилища) и custom store (пользовательские хранилища). Смотреть на Rutube

8. Анимации и переходы в Svelte - Motion, Transition and Animation

В этом видео рассматриваем анимации в Svelte, а именно анимации значений (Svelte motion), анимации переходов (Svelte Transition), Svelte Animate, директивы transition, in, out и многое другое. Смотреть на Rutube

9. Действия и директива use - Svelte Actions

В этом видео рассматриваем Действия в Svelte, для чего они нужно и как ими пользоваться. Добавляем в проект директиву use, отправляем события из Действия и реализовываем функции действий - destroy и update. Смотреть на Rutube

10. Слоты - Svelte slots. Context Модуль - Svelte module context

В этом видео рассматриваем слоты в Svelte и работу с script c context="module". Смотреть на Rutube

11. API контекста - Svelte Context API

В этом видео рассматриваем возможности контекста Svelte, функции setContext, getContext и hasContext, а также применение CSS классов по условию. Смотреть на Rutube

12. Специальные элементы - Svelte Special elements

В этом видео рассматриваем специальные элементы в Svelte. Смотреть на Rutube Исходный код проекта