[Перевод] Документация Babel @babel/preset-env

Babel
[Перевод] Документация Babel @babel/preset-env

BabelОн стал важной цепочкой инструментов для разработки передовых инженерных систем, и@babel/preset-env(Плагины и пресеты после babel7.0 имеют префикс @babel) — это часто используемый набор предустановленных плагинов,BabelКитайская сеть еще не перевела часть содержания этой статьи.Babelофициальный документ на английском языке@babel/preset-envПеревод контента, внешний интерфейс Xiaoxuo имеет ограниченный уровень английского шлака, добро пожаловать на исправление и обмен

@babel/preset-env

@babel/preset-envумныйbabelПредустановки, чтобы вы могли использовать последниеJavaScriptсинтаксис, это поможет вам преобразовать код в синтаксис, поддерживаемый целевой операционной средой кода, повысить эффективность разработки и уменьшить упакованный код.

Установить

использоватьnpm

npm install --save-dev @babel/preset-env

использоватьyarn

yarn add @babel/preset-env --dev

Рабочий механизм

@babel/preset-envЗависит от некоторых отличных проектов с открытым исходным кодом, таких какbrowserslist, compat-table, electron-to-chromium...

Мы используем эти источники данных для поддержания и улучшенияBabelПреобразование синтаксиса и реализация синтаксиса для поддержки синтаксиса и функций соответствующей версии целевой среды.

Уведомление@babel/preset-envне поддерживаетсяstage-xплагин

@babel/preset-envВ любой целевой среде, которую вы укажете, проверьте наличие соответствующих подключаемых модулей и передайте их вBabel

Коллекция списков браузера

для браузера илиElectronпроекты, мы рекомендуем использовать.browserslistrcВ файле указывается цель компиляции. Если у вас уже есть этот файл конфигурации, он будет использоваться многими инструментами в экосистеме внешнего интерфейса, такими какautoprefixer, stylelint, eslint-plugin-compat...

Если не настроенtargetsилиignoreBrowserslistConfig, @babel/preset-envбудет использовать значение по умолчаниюBrowserslistнастроить

Если вы хотите поддерживать браузеры с долей рынка более 0,25% и игнорировать обновления безопасности, такие какIE 10а такжеBlackBerryПреобразование синтаксиса и реализация синтаксиса , вы можете использовать следующую конфигурацию

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

.browserlistrc

> 0.25%
not dead

или вы можетеpackage.jsonконфигурация в файле

"browserslist": "> 0.25%, not dead"

элемент конфигурации

Если вы хотите получить дополнительную документацию по элементам конфигурации и пресетам, см.preset optionsДокументация

targets

тип данных:string | Array<string> | { [string]: string }, По умолчанию{}

Опишите целевую среду, которую поддерживает ваш проект

который может бытьbrowserslist-compatibleпроверить предложение

{
  "targets": "> 0.25%, not dead"
}

или объект, описывающий минимальную поддерживаемую версию среды

{
  "targets": {
    "chrome": "58",
    "ie": "11"
  }
}

среды, такие как:chrome, opera, edge, firefox, safari, ie, ios, android, node, electron

Обратите внимание, что если вы не укажетеtargets, @babel/prest-envбудет всеECMAScript 2015+Код преобразован в соответствии с конфигурацией по умолчанию

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

{
  "presets": ["@babel/preset-env"]
}
targets.esmodules

тип данных:boolean

Если ваш код работает в браузере, который его поддерживаетES Modules(woooooooo.EC-Code-international.org/EC-Code-262/6. …), когда указана следующая конфигурация,browersполе будет проигнорировано, вы можете вписать<script type="module"></script>В частности, предоставьте пользователям файлы кода меньшего размера (Джейк Арчибальд.com/2017/starve-to-touch…)

Примечание: если указано как таковоеesmodulesскомпилировать цель,browsersполя будут игнорироваться

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ]
  ]
}
targets.node

тип данных:string | "current" | true

Если ваша компиляция нацелена на текущийnodeверсию можно указатьnodeэлемент конфигурации, если вы укажете какcurren, будет эквивалентно"node": process.versions.node

targets.safari

тип данных:string | "tp"

Если вы будете ориентироватьсяSafariТехнический обзор браузераtechnology previewверсия для компиляции, вы можете указать"safari": "tp"

targets.browsers

тип данных:string | Array<string>

подвигbrowserlistпараметры запроса, такие какlast 2 versions, > 5%, safari tp

Уведомление,browsersРезультат будетtargetsПереопределение конфликтующих элементов в

Примечание. Этот элемент конфигурации будет удален в более поздних версиях в пользу прямой настройки.targetsв запрос

spec

тип данных:boolean, По умолчаниюfalse

Настройте некоторые плагины или пресеты, которые разрешены, но потенциально медленнее.

loose

тип данных:boolean, По умолчаниюfalse

Разрешить поддержкуloose transformationsплагины или пресеты

modules

тип данных:"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false, По умолчанию"auto"

разрешить преобразованиеES6Синтаксис модуля для других типов модулей

Установить какfalseне конвертирует модули

Уведомлениеcjsдаcommonjsпсевдоним

debug

тип данных:boolean, По умолчаниюfalse

console.logВыходная цель компиляции или используемый плагин находятся вplugin data versionверсия указана в

include

тип данных:Array<string|RegExp>, По умолчанию[]

набор часто включаемых плагинов

Допустимые конфигурации включают:

  • Babel plugins, @babel/plugin-transform-spreadбез префиксаplugin-transform-spreadоба поддерживают
  • Встроенные (поддерживает обаcores-js@2а такжеcores-js@3, Такие какes.map, es.set, илиes.object.assign)

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

Допустимый ввод:

  • Полное имя (string): "es.math.sign"
  • Наименование (string): "es.math.*"(разбирается как все, начиная сes.mathс префиксом плагинов)
  • Обычный(Object): /^transform-.*$/илиnew RegExp("^transform-modules-.*")

Обратите внимание, что в приведенном выше регулярном выражении.Эквивалентно для соответствия всем символам, а не только.И обратите внимание на регулярное выражение.*а такжеglobвнутри*Напротив

Этот параметр может быть полезен для отладки, если собственная реализация или раздел сочетает в себе неподдерживаемые функции и поддерживаемые функции.

Например,Node 4родная поддержкаclassesно не поддерживаетсяspread, еслиsuperи параметрыspreadиспользовать вместе,@babel/plugin-transform-classesнужно бытьinclude, иначе это не может быть переведено

Уведомление:includeа такжеexcludeОпция вступит в силу только в том случае, если плагин включен по умолчанию, поэтому, например, включите@babel/plugin-proposal-do-expressionsили исключить@babel/plugin-proposal-function-bindБудет сообщено об ошибке, если вы хотите использовать плагин, который не включен в предустановку, добавьте его непосредственно вplugins

exclude

тип данных:Array<string|RegExp>, По умолчанию[]

Массив, который записывает не включенные или удаленные плагины

Возможна конфигурация сincludeтакие варианты, как

Эта опция эквивалентна черному списку, если вы не используетеgeneratorsи при настройкеuseBuiltInsне хочу включатьregeneratorRuntime, или используйте другиеfast-asyncзамена плагинаBabel's async-to-gen

useBuiltIns

тип данных:"usage" | "entry" | false, По умолчаниюfalse

Этот параметр настраивает@babel/preset-envкак с этим боротьсяpolyfill

когдаusageилиentryиспользуется вариант,@babel/preset-envбудет пить прямоcores-jsМодули эквивалентны экспозицииimportsилиrequries, Это местоcore-jsбудет проанализирован непосредственно в самом файле и должен быть доступен

потому что@babel/polyfillсуществуетBabel 7.4.0Устарело, мы рекомендуем добавить его напрямуюcore-jsи черезcorejsверсия набора опций

npm install core-js@3 --save

# or

npm install core-js@2 --save

useBuiltIns: 'entry'

Примечание. Вы можете использовать его только один раз во всем приложении.import "core-jsа такжеimport "regenerator-runtime/runtime", если вы используете@babel/polyfill, которая включает в себяcore-jsа такжеregenerator-runtime: Если вы импортируете его несколько раз или сообщаете об ошибке. Многократный импорт этих пакетов вызовет глобальные конфликты и другие проблемы, которые трудно отследить. Мы рекомендуем создать пакет, который содержит толькоimportЗаявленный файл с одной записью

Когда необходимо ввести разные записи на основе среды, разныеcore-js, эта опция позволяет новому плагину заменитьimport "core-js/stable"а такжеimport "regenerator-runtime/runtime"заявление (илиrequire("corejs")а такжеrequire("regenerator-runtime/runtime"))

In

import "core-js";

Out (на основе разных сред)

import "core-js/modules/es.string.pad-start";
import "core-js/modules/es.string.pad-end";

представлять"core-js"загружен для всех возможныхECMAScriptСинтаксис заполняет функции, если вы знаете, что вам нужны только некоторые из них при использованииcore-js@3а также@babel/preset-env, для каждогоcore-jsВвод и оптимизация его зависимостей.Например, вы видите значения, которые необходимо заполнить методами массива и новымиMathпредложение:

In

import "core-js/es/array";
import "core-js/proposals/math-extensions";

Out (на основе разных сред)

import "core-js/modules/es.array.unscopables.flat";
import "core-js/modules/es.array.unscopables.flat-map";
import "core-js/modules/esnext.math.clamp";
import "core-js/modules/esnext.math.deg-per-rad";
import "core-js/modules/esnext.math.degrees";
import "core-js/modules/esnext.math.fscale";
import "core-js/modules/esnext.math.rad-per-deg";
import "core-js/modules/esnext.math.radians";
import "core-js/modules/esnext.math.scale";

ты можешь читатьcore-jsдокументы для получения информации о различных порталах

Примечание: при использованииcore-js@2(использоватьcorejs: 2элемент конфигурации или неявное использование),@babel/preset-envтакже представит@babel/polyfill. Это поведение устарело, потому что невозможно@babel/polyfillиспользовать разныеcore-jsВерсия

useBuiltIns: 'usage'

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

In

a.js

var a = new Promise();

b.js

var b = new Map();

Out (если среда требует заполнения синтаксиса)

import "core-js/modules/es.promise";
var a = new Promise();

import "core-js/modules/es.map";
var b = new Map();

Out (если среда поддерживает синтаксис)

var a = new Promise();

var b = new Map();

useBuiltIns: false

Не добавлять автоматически заполнение синтаксиса в каждый файл, не преобразовыватьimport "core-js"а такжеimport "@babel/polyfill"заполнение для отдельных грамматик

corejs

структура данных:2, 3или{ version: 2 | 3, proposals: boolean }, По умолчанию2

Этот вариант будет работать только сuseBuiltIns: usageилиuseBuiltIns: entryОн вступит в силу только при совместном использовании, чтобы гарантировать, что@babel/preset-envдля тебяcore-jsВерсия вводит правильный импорт

По умолчанию только стабильныйECMAScriptСинтаксическое заполнение атрибута вводится, у вас есть три способа сделать синтаксическое заполнение:

  • когда используешьuseBuiltIns: "entry", вы можете напрямую ввестиproposal polyfill: import "core-js/proposals/string-replace-all"
Категории