Установка Stencil CLI

Stencil — это современный фреймворк для создания Web-компонентов, ориентированный на производительность и удобство разработки. Он позволяет создавать повторно используемые, изолированные компоненты, которые могут работать с любыми фреймворками или без них. Для работы с Stencil необходим инструмент командной строки — Stencil CLI. Рассмотрим процесс установки этого инструмента и подготовку окружения для начала разработки.

Требования

Перед установкой Stencil CLI необходимо убедиться, что на машине установлены следующие инструменты и зависимости:

  • Node.js: Рекомендуется использовать последнюю стабильную версию Node.js. Для проверки версии можно использовать команду:

    node -v

    Если Node.js не установлен, его можно скачать с официального сайта https://nodejs.org/.

  • npm или yarn: Для установки зависимостей Stencil CLI используется менеджер пакетов npm или yarn. npm поставляется вместе с Node.js, в то время как yarn нужно установить отдельно. Для проверки наличия npm на компьютере можно выполнить команду:

    npm -v

    Для установки yarn:

    npm install --global yarn

Установка Stencil CLI

Stencil CLI можно установить глобально, используя npm или yarn. Для этого нужно выполнить одну из следующих команд в терминале:

С помощью npm:

npm install --global @stencil/core

С помощью yarn:

yarn global add @stencil/core

После установки Stencil CLI можно проверить его доступность, запустив команду:

stencil --version

Если установка прошла успешно, в ответ будет выведена версия Stencil.

Инициализация проекта

Для создания нового проекта с использованием Stencil CLI, необходимо выполнить команду инициализации. Сначала нужно создать папку для проекта:

mkdir my-stencil-app
cd my-stencil-app

Затем инициализировать новый проект:

stencil init

После выполнения этой команды будет предложено выбрать один из шаблонов для проекта. Обычно предлагаются несколько вариантов:

  • Stencil App: Стандартный шаблон для создания приложения с использованием Stencil.
  • Component: Шаблон для создания только одного компонента, без лишней логики приложения.
  • Custom: Возможность выбрать кастомные настройки для проекта.

После выбора шаблона Stencil создаст все необходимые файлы и директории для проекта.

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

После инициализации проекта структура будет выглядеть следующим образом:

my-stencil-app/
  ├── src/
  │   ├── components/
  │   └── index.ts
  ├── stencil.config.ts
  ├── package.json
  ├── tsconfig.json
  └── www/
  • src/ — папка, где располагаются исходные файлы проекта, включая компоненты.
  • stencil.config.ts — конфигурационный файл, в котором задаются параметры сборки.
  • www/ — директория, в которой будут храниться собранные файлы для развертывания.
  • package.json — файл с зависимостями и скриптами для проекта.
  • tsconfig.json — настройки TypeScript для проекта.

Запуск проекта

После того как проект создан и все файлы находятся на месте, можно запустить его с помощью Stencil CLI. Для этого используется команда:

npm start

Или если используется yarn:

yarn start

Эта команда запускает локальный сервер, который будет отслеживать изменения в проекте и автоматически обновлять браузер. Открывая браузер по адресу http://localhost:3333, можно увидеть результат работы проекта.

Настройка Stencil CLI

Stencil CLI поддерживает несколько полезных опций для настройки процесса сборки и разработки. Основные настройки проекта описываются в файле stencil.config.ts. В этом файле можно настроить:

  • Порты для локальной разработки.
  • Входные точки для сборки.
  • Режимы сборки (например, development или production).
  • Плагины для расширения функциональности.

Пример минимальной конфигурации:

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'my-app',
  outputTargets: [
    {
      type: 'www',
      dir: 'www',
      serviceWorker: null
    }
  ]
};

В данном примере настроен выходной таргет для создания сайта в папку www.

Установка зависимостей

Stencil использует множество зависимостей, которые необходимо установить для полноценной работы фреймворка. Все необходимые зависимости прописаны в файле package.json, и для их установки достаточно выполнить команду:

npm install

Или:

yarn install

После этого проект будет готов к использованию.

Обновление Stencil CLI

Для обновления Stencil CLI до последней версии можно использовать команду:

npm update --global @stencil/core

Или:

yarn global upgrade @stencil/core

Таким образом, процесс установки и начальной настройки Stencil CLI включает несколько простых шагов, начиная с установки самого фреймворка и заканчивая настройкой проекта для разработки и сборки.

Оглавление