You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/ru/guide/browser-compatibility.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -4,15 +4,15 @@
4
4
5
5
Вы заметите поле `browserslist` в файле `package.json` (или файл `.browserslistrc`), где определяется диапазон браузеров под которые разрабатывается проект. Эти значения будут использоваться в [@babel/preset-env][babel-preset-env] и [autoprefixer][autoprefixer] для автоматического определения возможностей JavaScript, которые требуется транспилировать, а также необходимые префиксные правила CSS.
6
6
7
-
Как указывается диапазон браузеров можно узнать [здесь][browserslist].
7
+
Как указывается диапазон браузеров, можно узнать [здесь][browserslist].
8
8
9
9
## Полифилы
10
10
11
-
По умолчанию, проект Vue CLI использует [@vue/babel-preset-app][babel-preset-app], в котором используется `@babel/preset-env` и конфигурация `browserslist` для определения необходимых полифилов.
11
+
По умолчанию проект Vue CLI использует [@vue/babel-preset-app][babel-preset-app], в котором используется `@babel/preset-env` и конфигурация `browserslist` для определения необходимых полифилов.
12
12
13
13
### useBuiltIns: 'usage'
14
14
15
-
По умолчанию в `@babel/preset-env` будет передаваться [`useBuiltIns: 'usage'`](https://new.babeljs.io/docs/en/next/babel-preset-env.html#usebuiltins-usage) для автоматического определения необходимых полифилов, основываясь на том, какие возможности языка были использованы в исходном коде проекта. Это гарантирует, что в финальную сборку попадёт только минимально необходимое количество полифилов. Однако, это также означает, что **если одна из ваших зависимостей имеет специфичные требования к полифилам, то по умолчанию Babel не сможет это определить.**
15
+
По умолчанию в `@babel/preset-env` будет передаваться [`useBuiltIns: 'usage'`](https://new.babeljs.io/docs/en/next/babel-preset-env.html#usebuiltins-usage) для автоматического определения необходимых полифилов, основываясь на том, какие возможности языка были использованы в исходном коде проекта. Это гарантирует, что в финальную сборку попадёт только минимально необходимое количество полифилов. Однако это также означает, что **если одна из ваших зависимостей имеет специфичные требования к полифилам, то по умолчанию Babel не сможет это определить.**
16
16
17
17
Если одной из ваших зависимостей требуются полифилы, у вас есть несколько вариантов:
18
18
@@ -38,17 +38,17 @@
38
38
Рекомендуется добавлять полифилы таким образом, а не напрямую импортировать их в коде, потому что полифилы перечисленные здесь, могут быть автоматически исключены, если целевым браузерам, указанным в `browserslist`, они не нужны.
39
39
:::
40
40
41
-
3.**Если зависимость предоставляет ES5 код, но использует возможности ES6+ без явного перечисления необходимых полифилов (например, Vuetify):** Используйте `useBuiltIns: 'entry'` и затем добавьте `import '@babel/polyfill'` в файл точки входа. Это будет импортировать **ВСЕ** полифилы, на основе целей, перечисленных в `browserslist`, так что вам больше не нужно будет беспокоиться о полифилах для зависимостей, но это скорее всего увеличит размер финальной сборки некоторыми неиспользуемыми полифилами.
41
+
3.**Если зависимость предоставляет ES5 код, но использует возможности ES6+ без явного перечисления необходимых полифилов (например, Vuetify):** Используйте `useBuiltIns: 'entry'` и затем добавьте `import '@babel/polyfill'` в файл точки входа. Это будет импортировать **ВСЕ** полифилы на основе целей, перечисленных в `browserslist`, так что вам больше не нужно будет беспокоиться о полифилах для зависимостей, но это скорее всего увеличит размер финальной сборки некоторыми неиспользуемыми полифилами.
42
42
43
43
Подробнее можно изучить в [документации @babel-preset/env](https://new.babeljs.io/docs/en/next/babel-preset-env.html#usebuiltins-usage).
44
44
45
45
### Полифилы при сборке библиотеки или веб-компонентов
46
46
47
-
При использовании Vue CLI для [сборки библиотеки или веб-компонентов](./build-targets.md), рекомендуется указывать `useBuiltIns: false` для `@vue/babel-preset-app` чтобы отключить автоматическое добавление полифилов. Это гарантирует, что вы не добавляете ненужные полифилы в свой код, потому что полифилами должно будет заниматься приложение, где они будут использоваться.
47
+
При использовании Vue CLI для [сборки библиотеки или веб-компонентов](./build-targets.md) рекомендуется указывать `useBuiltIns: false` для `@vue/babel-preset-app`, чтобы отключить автоматическое добавление полифилов. Это гарантирует, что вы не добавляете ненужные полифилы в свой код, потому что полифилами должно будет заниматься приложение, где они будут использоваться.
48
48
49
49
## Современный режим
50
50
51
-
Благодаря Babel мы можем использовать все новейшие возможности языка ES2015+, но это также означает, что нам необходимо предоставлять транспилированную сборку с полифилами для поддержки старых браузеров. Эти транспилированные сборки зачастую больше в размере, чем оригинальный исходный код в ES2015+, а их парсинг и выполнение происходит медленнее. Учитывая, что сегодня у большинства современных браузеров есть прекрасная поддержка ES2015, становится пустой тратой необходимость предоставлять более тяжёлый и менее эффективный код для них лишь потому что должны поддерживать старые версии браузеров.
51
+
Благодаря Babel мы можем использовать все новейшие возможности языка ES2015+, но это также означает, что нам необходимо предоставлять транспилированную сборку с полифилами для поддержки старых браузеров. Эти транспилированные сборки зачастую больше в размере, чем оригинальный исходный код в ES2015+, а их парсинг и выполнение происходит медленнее. Учитывая, что сегодня у большинства современных браузеров есть прекрасная поддержка ES2015, становится пустой тратой необходимость предоставлять более тяжёлый и менее эффективный код для них лишь потому, что мы должны поддерживать старые версии браузеров.
52
52
53
53
Vue CLI предоставляет «Современный режим», чтобы помочь в решении этой проблемы. При сборке для production с помощью следующей команды:
54
54
@@ -66,7 +66,7 @@ Vue CLI будет собирать **две версии** вашего при
66
66
67
67
- Исправление ошибки для `<script nomodule>` в Safari 10 также внедряется автоматически.
68
68
69
-
Для приложения Hello World, современная сборка на 16% меньше. В production использование современной сборки приводит к значительному ускорению парсинга и исполнения кода, что повышает производительность загрузки приложения.
69
+
Для приложения Hello World современная сборка на 16% меньше. В production использование современной сборки приводит к значительному ускорению парсинга и исполнения кода, что повышает производительность загрузки приложения.
70
70
71
71
::: tip Совет
72
72
`<script type="module">` загружаются [всегда с помощью CORS](https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors). Это значит, что ваш сервер должен возвращать корректные заголовки CORS, такие как `Access-Control-Allow-Origin: *`. Если вы хотите загружать скрипты с помощью credentials, установите опцию [crossorigin](../config/#crossorigin) в значение `use-credentials`.
Vue CLI использует две переменных окружения для определения этого:
85
85
86
86
*`VUE_CLI_MODERN_MODE`: флаг, что сборка была запущена с флагом `--modern`
87
-
*`VUE_CLI_MODERN_BUILD`:значениемtrue будет если текущая конфигурация для современной сборки. В противном случае это сборка для старых браузеров.
87
+
*`VUE_CLI_MODERN_BUILD`:значениеtrue будет, если текущая конфигурация для современной сборки. В противном случае это сборка для старых браузеров.
88
88
89
89
**Важно:** Переменные доступны только при вызове/после вызова функций `chainWebpack()` и `configureWebpack()`, (т.е. не напрямую в области видимости модуля `vue.config.js`). Это также означает, что они доступны в файле конфигурации postcss.
0 commit comments