Установка через npm

FAST Element — это современная библиотека для создания веб-компонентов с высокой производительностью и гибкой системой шаблонов. Для работы с ней рекомендуется использовать пакетный менеджер npm, который обеспечивает удобное управление зависимостями и интеграцию с современными сборщиками вроде Vite, Webpack или Rollup.

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

Перед установкой FAST Element необходимо создать проект с поддержкой npm:

mkdir fast-element-app
cd fast-element-app
npm init -y

Команда npm init -y создаёт файл package.json с базовыми настройками проекта. Этот файл является ключевым для управления зависимостями и конфигурацией сборки.

Установка FAST Element

Для установки FAST Element используется стандартная команда npm:

npm install @microsoft/fast-element

После выполнения этой команды в package.json автоматически добавится зависимость:

"dependencies": {
  "@microsoft/fast-element": "^1.0.0"
}

Также создается папка node_modules, где будут храниться все пакеты и их зависимости.

Установка TypeScript и инструментов сборки

Для полноценной работы с FAST Element рекомендуется использовать TypeScript. Для этого устанавливаются следующие пакеты:

npm install typescript ts-node --save-dev
npm install @types/node --save-dev
  • typescript — компилятор TypeScript.
  • ts-node — позволяет запускать TypeScript файлы без предварительной компиляции.
  • @types/node — типы для Node.js, обеспечивающие корректную работу инструментов сборки.

Для сборки проекта также часто подключают Vite или Webpack:

npm install vite --save-dev

Vite интегрируется с FAST Element из коробки и поддерживает модульные импорты, горячую перезагрузку и оптимизацию производительности.

Проверка установки

После установки можно создать минимальный пример веб-компонента. Создайте файл app.ts:

import { FASTElement, html, css, customElement } from "@microsoft/fast-element";

@customElement({ name: "my-element" })
class MyElement extends FASTElement {
  static styles = css`
    :host {
      display: block;
      font-family: Arial, sans-serif;
      color: #333;
    }
  `;

  template = html`
    <div>Привет, FAST Element!</div>
  `;
}

Для запуска можно использовать Vite, указав входной файл в index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>FAST Element App</title>
  <script type="module" src="/app.ts"></script>
</head>
<body>
  <my-element></my-element>
</body>
</html>

После старта сервера (npx vite) компонент будет корректно отображаться в браузере.

Настройка package.json для сборки

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

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview"
}
  • dev — запуск проекта в режиме разработки.
  • build — компиляция TypeScript и сборка финального пакета.
  • preview — локальный просмотр скомпилированного приложения.

Рекомендации по структуре проекта

Рекомендуется разделять проект на следующие папки:

fast-element-app/
│
├─ src/
│  ├─ components/
│  │  └─ my-element.ts
│  └─ index.ts
│
├─ index.html
├─ package.json
└─ tsconfig.json
  • components/ — хранение всех веб-компонентов.
  • index.ts — точка входа, объединяющая все компоненты.
  • index.html — основной HTML-файл для отображения приложения.

Установка дополнительных пакетов FAST

Помимо ядра @microsoft/fast-element, существуют дополнительные пакеты, которые расширяют функциональность:

npm install @microsoft/fast-foundation
npm install @microsoft/fast-components
  • fast-foundation — набор базовых классов и утилит для веб-компонентов.
  • fast-components — готовые UI-компоненты, построенные на FAST Element, включая кнопки, карточки, формы и меню.

Использование этих пакетов позволяет ускорить разработку и поддерживать единый стиль компонентов.

Итоговые шаги после установки

  1. Создание структуры проекта.
  2. Установка FAST Element и зависимостей.
  3. Настройка сборщика (Vite, Webpack).
  4. Создание первого компонента с шаблоном и стилями.
  5. Запуск сервера разработки для проверки работоспособности.

Эти действия обеспечивают готовую среду для работы с FAST Element и позволяют переходить к более сложной разработке пользовательских компонентов.

Оглавление