# Цели сборки

При запуске `vue-cli-service build` вы можете определить цели сборки опцией `--target`. Это позволит использовать одну кодовую базу для создания сборок под различные случаи.

## Приложение (App)

Приложение — цель сборки по умолчанию. В этом режиме:

- `index.html` с внедрением ресурсов и подсказок для пред-загрузки
- сторонние библиотеки разделяются на отдельные фрагменты для лучшего кэширования
- статические ресурсы менее 4 КБайт будут вставлены инлайн в JavaScript
- статические ресурсы в `public` будут скопированы в каталог сборки

## Библиотека (Library)

::: tip Примечание о зависимости Vue
В режиме библиотеки Vue *экстернализируется*. Это означает, что сборка не будет содержать Vue, даже если ваш код его импортирует. Если библиотека используется через сборщик, он должен попытаться загрузить Vue в качестве зависимости через сборщик; в противном случае, он должен вернуться к глобальной переменной `Vue`.

Чтобы избежать экстернализиции Vue установите флаг `--inline-vue` для команды `build`.

```
vue-cli-service build --target lib --inline-vue
```
:::

Вы можете запустить сборку одной точки входа в качестве библиотеки с помощью:

```
vue-cli-service build --target lib --name myLib [entry]
```

```
File                     Size                     Gzipped

dist/myLib.umd.min.js    13.28 kb                 8.42 kb
dist/myLib.umd.js        20.95 kb                 10.22 kb
dist/myLib.common.js     20.57 kb                 10.09 kb
dist/myLib.css           0.33 kb                  0.23 kb
```

Точка входа может быть `.js` или `.vue` файлом. Если точка входа не указана, то будет использоваться `src/App.vue`.

Сборка библиотеки сгенерирует:

- `dist/myLib.common.js`: сборка CommonJS для использования в сборщиках (к сожалению, webpack в настоящее время пока ещё не поддерживает формат ES-модулей для сборок)

- `dist/myLib.umd.js`: сборка UMD для использования в браузерах или с AMD загрузчиками

- `dist/myLib.umd.min.js`: минифицированная версия UMD сборки.

- `dist/myLib.css`: извлечённый CSS-файл (можно принудительно вставлять стили инлайн, установив `css: { extract: false }` в `vue.config.js`)

::: warning ВНИМАНИЕ
При разработке библиотеки или использования монорепозитория, имейте ввиду, что CSS-импорты **являются побочными эффектами (side effects)**. Убедитесь, что **удалили** опцию `"sideEffects": false` из файла `package.json`, в противном случае webpack будет удалять CSS-фрагменты при сборке для production.
:::

### Vue vs. JS / TS файлы точек входа

При использовании `.vue` файла в качестве точки входа, библиотека будет экспортировать сам компонент Vue, потому что компонент всегда имеет экспорт по умолчанию (export default).

Однако, когда используется `.js` или `.ts` файл в качестве точки входа, он может содержать именованные экспорты, поэтому библиотека будет использоваться как модуль. Это означает, что экспорт библиотеки по умолчанию должен быть доступен как `window.yourLib.default` в UMD сборках, или как `const myLib = require('mylib').default` в CommonJS сборках. Если у вас нет именованных экспортов и вы хотите использовать экспорт по умолчанию (default export), вы можете использовать следующую конфигурацию webpack в `vue.config.js`:

```js
module.exports = {
  configureWebpack: {
    output: {
      libraryExport: 'default'
    }
  }
}
```

## Веб-компонент (Web Component)

::: tip Примечание совместимости
Режим веб-компонентов не поддерживается IE11 и ниже. [Подробнее](https://github.com/vuejs/vue-web-component-wrapper#compatibility)
:::

::: tip Примечание зависимости Vue
В режиме веб-компонентов Vue *экстернализируется.* Это означает, что сборка не будет содержать Vue, даже если ваш код его импортирует. Сборка будет подразумевать, что `Vue` доступен на странице в качестве глобальной переменной.

Чтобы избежать экстернализиции Vue установите флаг `--inline-vue` для команды `build`.

```
vue-cli-service build --target wc --inline-vue
```
:::

Вы можете запустить сборку одной точки входа в качестве веб-компонента с помощью:

```
vue-cli-service build --target wc --name my-element [entry]
```

Обратите внимание, что точка входа должна быть `*.vue` файлом. Vue CLI автоматически обернёт и зарегистрирует компонент как веб-компонент за вас, и нет необходимости делать это самостоятельно в `main.js`. Можно использовать `main.js` в качестве демо-приложения исключительно для разработки.

Сборка создаст один файл JavaScript (и его минифицированную версию) содержащий всё необходимое. Скрипт, когда добавлен на странице, зарегистрирует пользовательский элемент `<my-element>`, который оборачивает компонент Vue с помощью `@vue/web-component-wrapper`. Обёртка автоматически проксирует свойства, атрибуты, события и слоты. Подробнее можно узнать в [документации `@vue/web-component-wrapper`](https://github.com/vuejs/vue-web-component-wrapper).

**Обратите внимание, что сборка зависит от `Vue` глобально доступного на странице.**

Этот режим позволяет использовать компонент Vue как обычный элемент DOM:

```html
<script src="https://unpkg.com/vue"></script>
<script src="path/to/my-element.js"></script>

<!-- используем в простом HTML, или в любых других фреймворках -->
<my-element></my-element>
```

### Сборка, регистрирующая несколько веб-компонентов

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

```
vue-cli-service build --target wc --name foo 'src/components/*.vue'
```

При сборке нескольких веб-компонентов `--name` будет использовано в качестве префикса, а имя пользовательского элемента будет определяться именем файла компонента. Например, для `--name foo` и компонента `HelloWorld.vue`, итоговый пользовательский элемент будет зарегистрирован как `<foo-hello-world>`.

### Асинхронный веб-компонент (Async Web Component)

При указании нескольких веб-компонентов, сборка может стать довольно большой, а пользователь использовать только некоторые из компонентов, которые регистрирует сборка. Режим асинхронных веб-компонентов создаёт сборку, разделённую на части, с маленьким файлом точки входа, который обеспечивает общий runtime между всеми компонентами, и заранее регистрирует все пользовательские элементы. Фактическая реализация компонента загружается по требованию, только когда экземпляр соответствующего пользовательского элемента используется на странице:

```
vue-cli-service build --target wc-async --name foo 'src/components/*.vue'
```

```
File                Size                        Gzipped

dist/foo.0.min.js    12.80 kb                    8.09 kb
dist/foo.min.js      7.45 kb                     3.17 kb
dist/foo.1.min.js    2.91 kb                     1.02 kb
dist/foo.js          22.51 kb                    6.67 kb
dist/foo.0.js        17.27 kb                    8.83 kb
dist/foo.1.js        5.24 kb                     1.64 kb
```

Теперь на странице пользователю необходимо только подключить Vue и файл точки входа:

```html
<script src="https://unpkg.com/vue"></script>
<script src="path/to/foo.min.js"></script>

<!-- фрагмент с реализацией foo-one загрузится автоматически когда потребуется -->
<foo-one></foo-one>
```

## Использование vuex в сборках

При создании [Веб-компонента](#веб-компонент-web-component) или [Библиотеки](#бибnиотека-library), точкой входа будет не `main.js`, а файл `entry-wc.js`, генерируемый здесь: [https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/build/resolveWcEntry.js](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/build/resolveWcEntry.js)

Поэтому для использования vuex при сборке веб-компонента необходимо инициализировать хранилище в `App.vue`:

```js
import store from './store'

// ...

export default {
  store,
  name: 'App',
  // ...
}
```
