Output targets

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

Что такое Output Target

Output target в контексте Stencil — это механизм, который определяет, в какой именно формат будет скомпилирован и сгенерирован результат работы с компонентами. Каждый output target генерирует специфичный код или структуру, необходимую для интеграции с конкретной средой исполнения. Stencil поддерживает несколько типов output targets, каждый из которых имеет свои особенности и применение.

Основные типы Output Targets

  1. ES Modules

    ES модули — это стандартная спецификация JavaScript для работы с модулями. Этот output target генерирует компоненты как обычные ES модули, которые могут быть импортированы и использованы в любых современных веб-приложениях.

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

    Пример кода:

    import { MyComponent } from './components/my-component';

  2. CommonJS

    CommonJS — это модульная система, распространенная в Node.js. Stencil может генерировать компоненты, которые используют эту систему модулей, что удобно для серверных приложений или старых приложений, не поддерживающих ES модули.

    Генерация в формате CommonJS подходит для интеграции с Node.js, старым фронтенд-кодом или в проектах, где необходимо работать с системой сборки, ориентированной на CommonJS.

    Пример импорта:

    const MyComponent = require('./components/my-component');

  3. AMD

    AMD (Asynchronous Module Definition) — это стандарт модульной загрузки, который ориентирован на асинхронную загрузку модулей. Этот output target используется в приложениях, где требуется асинхронная загрузка компонентов для улучшения производительности, особенно при работе с большими и сложными приложениями.

    AMD подходит для интеграции с более старыми фреймворками или приложениями, которые используют эту технологию для загрузки модулей. Для этого используется библиотека загрузчиков, как, например, RequireJS.

  4. IIFE (Immediately Invoked Function Expression)

    IIFE — это подход к созданию JavaScript-кода, который сразу же выполняется при загрузке. В контексте Stencil этот output target позволяет генерировать компоненты, которые можно напрямую использовать в глобальной области видимости без необходимости использовать модули. Это может быть полезно, если компонент нужно внедрить в уже существующее приложение, не поддерживающее модули.

    Пример использования:

    <script src="my-component.js"></script>
<my-component></my-component>

  5. Hydrated Custom Elements

    Одним из наиболее мощных подходов в Stencil является поддержка гидратации компонентов. Этот output target генерирует компоненты как кастомные элементы, которые могут быть использованы в веб-приложениях. Гидратация позволяет серверу отправить «первоначальное» состояние компонента, которое затем может быть обновлено на клиенте, что значительно улучшает производительность.

    В этом случае компоненты отображаются на сервере и затем «гидратируются» на клиенте, что способствует более быстрой загрузке и рендерингу.

    Пример:

    <my-component></my-component>

  6. Stencil Web Component

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

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

    Пример:

    <my-component></my-component>

Конфигурация Output Targets

В Stencil можно настроить несколько output targets одновременно. Это позволяет генерировать несколько версий компонентов, предназначенных для различных случаев использования. Например, можно сгенерировать компоненты как для CommonJS, так и для ES модули в одном проекте.

Конфигурация output targets задается в файле stencil.config.ts. Вот пример конфигурации с несколькими output targets:

export const config: Config = {
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: './loader',
    },
    {
      type: 'www',
      serviceWorker: null,
    },
    {
      type: 'docs',
      dir: 'docs',
    },
    {
      type: 'www',
      dir: 'www',
    }
  ],
};

В этом примере используются следующие output targets:

  • dist — стандартная сборка с модулями.
  • www — целевая платформа для использования компонента в веб-приложении.
  • docs — генерация документации по компонентам.
  • www (повторно) — для создания скомпилированной версии, готовой к развертыванию на сервере.

Выбор Output Target

Выбор правильного output target зависит от ряда факторов:

  • Технологическая среда: Если приложение использует современные фреймворки и поддерживает ES модули, можно выбрать ES Modules. Для старых приложений, которые используют CommonJS, предпочтительнее будет выбрать этот формат.
  • Производительность: Для улучшения загрузки компонентов в больших приложениях может быть полезно использовать гидратацию или асинхронную загрузку через AMD.
  • Мобильные приложения: Для интеграции с мобильными приложениями можно генерировать компоненты в формате веб-компонентов или IIFE.
  • Многоплатформенность: Если нужно, чтобы компонент работал на разных платформах (например, и в веб-приложении, и в Node.js), стоит использовать несколько output targets.

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

Заключение

Output targets в Stencil являются важным инструментом для разработчиков, позволяющим адаптировать веб-компоненты под различные платформы и среды. Конфигурация этих целей проста, и поддержка нескольких форматов в одном проекте дает разработчикам гибкость при выборе оптимального способа распространения компонентов.

Оглавление