правильноBabelРоль элементов конфигурации не так хорошо изучена, повлияет ли это на ежедневную разработку? Честно говоря, в большинстве случаев это не имеет большого значения (в конце концов, есть поисковые системы).
Тем не менее, я все еще хочу узнать о нем больше, поэтому недавно внимательно прочитал его.BabelДокумент, а также непрерывная компиляция и проверка, выводят эту статью для лучшего чтения, модифицируют и модифицируют и, наконец, продвигают каждую точку знаний так, как я лично предпочитаю (введение каждой конфигурации не просто так), надеюсь, что это поможет вамBabelЕсть более четкое представление о различных конфигурациях (вы это уже хорошо знаете, игнорируйте эту статью).
Babel — это JS-компилятор.
Babel — это цепочка инструментов, в основном используемая для преобразования кода версии ECMAScript 2015+ в обратно совместимый синтаксис JavaScript, чтобы его можно было запускать в текущих и более старых браузерах или других средах.
давайте сначала посмотримBabelЧто может быть сделано:
- Преобразование синтаксиса
- пройти через
Polyfillспособ добавить отсутствующие функции в целевой среде (@babel/polyfill模块) - Преобразование исходного кода (codemods)
Цель этой статьи — понятьBabelиспользование и настройка, выяснить@babel/runtime,@babel/polyfill,@babel/plugin-transform-runtimeЧто они делают, для чего нужны плагины и пресеты, зачем их настраивать, а не какASTконвертируй, если ты правASTпреобразование представляет большой интерес, добро пожаловать, чтобы прочитать нашРН к движку апплета АлитаИсходный код , в котором большое количествоASTконвертировать.
Больше статей можно проштамповать (типа Звезда, спасибо): https://github.com/YvetteLau/Blog
Чтобы получить более четкое представление о каждом шаге, сначала создайте новый проект, например.babelTemp(назовите его как хотите), используйтеnpm init -yинициализировать, создатьsrc/index.js, содержимое файла следующее (можно написать и что угодно):
const fn = () => {
console.log('a');
};
Хорошо, сначала отложите созданный проект, а сначала разберитесь с теоретическими знаниями:
Базовая библиотека @babel/core
Основная функциональность Babel содержится в@babel/coreв модуле. Видетьcoreслово, значитосновной, без него, вbabelМиру суждено быть трудным в движении. не устанавливайте@babel/core,Недоступноbabelкомпилировать.
Инструмент командной строки CLI @babel/cli
babelПредоставленные инструменты командной строки, в основном для предоставленияbabelЭта команда подходит для установки в проект.
@babel/nodeпри условииbabel-nodeкоманда, но@babel/nodeБольше подходит для глобальной установки, не подходит для установки в проекте.
npm install --save-dev @babel/core @babel/cli
Теперь вы можете использовать в своем проектеbabelСкомпилируйте его (если не установлен@babel/core, сообщит об ошибке)
настроить команду вpackage.jsonдокументscriptsВ поле:
//...
"scripts": {
"compiler": "babel src --out-dir lib --watch"
}
использоватьnpm run compilerДля выполнения компиляции сейчас мы не настраивали никаких плагинов, код до и после компиляции абсолютно одинаковый.
потому чтоBabelХоть и работает из коробки, но ничего не делает, если хотитеBabelЧтобы сделать какую-то реальную работу, вам нужно добавить к нему плагин (plugin).
плагин
BabelПостроенный поверх плагинов канал конверсии может быть сформирован с использованием существующих или самописных плагинов,BabelСуществует два типа плагинов: плагины синтаксиса и плагины преобразования.
плагин синтаксиса
Эти плагины позволяют толькоBabel РазобратьОпределенный тип синтаксиса (не конвертировать), вы можетеASTИспользуется при преобразовании для поддержки синтаксического анализа новых грамматик, например:
import * as babel from "@babel/core";
const code = babel.transformFromAstSync(ast, {
//支持可选链
plugins: ["@babel/plugin-proposal-optional-chaining"],
babelrc: false
}).code;
плагин преобразования
Подключаемый модуль преобразования активирует соответствующий подключаемый модуль грамматики (поэтому нет необходимости указывать оба подключаемых модуля одновременно).
Использование плагинов
Если плагин опубликован вnpm, вы можете напрямую ввести название плагина,Babelавтоматически проверит, установлен ли он уже вnode_modulesкаталог, создайте новый проект в каталоге проекта.babelrcфайл (файл конфигурации будет подробно описан ниже), конфигурация выглядит следующим образом:
//.babelrc
{
"plugins": ["@babel/plugin-transform-arrow-functions"]
}
Вы также можете указать относительные/абсолютные пути к плагинам
{
"plugins": ["./node_modules/@babel/plugin-transform-arrow-functions"]
}
воплощать в жизньnpm run compiler, вы можете видеть, что стрелочная функция скомпилирована нормально,lib/index.jsСодержание следующее:
const fn = function () {
console.log('a');
};
Теперь мы поддерживаем только преобразование стрелочных функций.Если вы хотите преобразовать другие новые функции JS в более ранние версии, вам нужно использовать другие соответствующиеplugin. Если настраивать по одному, то будет очень громоздко, т.к. может понадобиться настраивать десятки плагинов, что заведомо очень неудобно, так есть ли способ упростить эту настройку?
имеют! По умолчанию! (Благодаря могучемуBabel)
предустановка
с помощью или созданияpresetТолько чтолегкийИспользуйте набор плагинов.
Официальный пресет
- @babel/preset-env
- @babel/preset-flow
- @babel/preset-react
- @babel/preset-typescript
Примечание:Начиная с Babel v7, все предварительные настройки этапа, написанные для стандартных функций этапа предложения, устарели и официально удалены.@babel/preset-stage-x.
@babel/preset-env
@babel/preset-envОсновная роль заключается в перекодировании и загрузке функций, которые мы используем и которых нет в целевом браузере.polyfill, без какой-либо настройки,@babel/preset-envВключенный плагин будет поддерживать все последние функции JS (ES2015, ES2016 и т. д., за исключением этапа stage), преобразуя его в код ES5. Например, если вы используете необязательную цепочку в своем коде (в настоящее время все еще на стадии), то настройте только@babel/preset-env, то при конвертации будет выдаваться ошибка, и соответствующий плагин нужно устанавливать отдельно.
//.babelrc
{
"presets": ["@babel/preset-env"]
}
Следует отметить,@babel/preset-envВ соответствии с настроенной вами целевой средой будет создан список подключаемых модулей для компиляции. для браузера илиElectron, официальная рекомендация - использовать.browserslistrcфайл, чтобы указать целевую среду. По умолчанию, если вы не находитесь вBabelНастройки файла конфигурации (например, .babelrc)targetsилиignoreBrowserslistConfig,@babel/preset-envБудет использованоbrowserslistНастройте источник.
Если вы не хотите быть совместимым со всеми браузерами и средами, рекомендуется указать целевую среду, чтобы ваш скомпилированный код был сведен к минимуму.
Например, включите только то, что требуется для пользователей с долей браузера на рынке более 0,25%.polyfillи транскодирование (игнорируйте браузеры без обновлений безопасности, такие как IE10 и BlackBerry):
//.browserslistrc
> 0.25%
not dead
Проверитьbrowserslistдополнительная конфигурация
Например, вы будете.browserslistrcКонфигурация контента:
last 2 Chrome versions
затем выполнитьnpm run compiler, вы обнаружите, что стрелочные функции не будут скомпилированы в ES5, потому чтоchromeПоследние 2 версии обоих могут поддерживать функции стрелок. Теперь мы будем.browserslistrcВсе равно измените на предыдущую конфигурацию.
Что касается нашего текущего кода, текущая конфигурация выглядит нормально.
Давайте изменимsrc/index.js.
const isHas = [1,2,3].includes(2);
const p = new Promise((resolve, reject) => {
resolve(100);
});
Скомпилированный результат:
"use strict";
var isHas = [1, 2, 3].includes(2);
var p = new Promise(function (resolve, reject) {
resolve(100);
});
Если этот скомпилированный код используется в браузере более ранней версии, очевидно, есть проблема, потому что в браузере более ранней версии нет экземпляра массива.includesметод, ниPromiseКонструктор.
Почему это? Поскольку преобразование синтаксиса преобразует только синтаксис более высокой версии в более низкую версию, но новые встроенные функции и методы экземпляра не могут быть преобразованы. В этом случае нужно использоватьpolyfillДавай, как следует из названия,polyfillКитайское значение shim заключается в том, чтобы сгладить различия между разными браузерами или разными средами, чтобы новые встроенные функции, методы экземпляров и т. д. также можно было использовать в браузерах более ранних версий.
Polyfill
@babel/polyfillмодули включаютcore-jsи обычайregenerator runtimeМодуль, имитирующий полную среду ES2015+ (за исключением предложений, предшествующих этапу 4).
Это означает, что вы можете использоватьPromiseа такжеWeakMapновые встроенные компоненты, такие какArray.fromилиObject.assignстатические методы, такие какArray.prototype.includesтакие как методы экземпляра и функции генератора (при условии, что вы используете@babel/plugin-transform-regeneratorплагин). Чтобы добавить эти функции,polyfillбудут добавлены в глобальную область видимости и аналогичныеStringВ таком встроенном прототипе (который будет загрязнять глобальную среду, методы, не загрязняющие глобальную среду, мы введем позже).
Дополнительное примечание (07.01.2020):Начиная с версии V7.4.0,@babel/polyfillБыл заброшен (front-end разработка меняется с каждым днем), нужно устанавливать отдельноcore-jsа такжеregenerator-runtimeмодуль.
Сначала установите@babel/polyfillполагаться:
npm install --save @babel/polyfill
Примечание: не используйте--save-dev, так как это прокладка, которую необходимо запустить перед исходным кодом.
Нам нужно поставить полныйpolyfillзагрузите перед кодом, измените нашsrc/index.js:
import '@babel/polyfill';
const isHas = [1,2,3].includes(2);
const p = new Promise((resolve, reject) => {
resolve(100);
});
@babel/polyfillНеобходимо ввести перед другим кодом, мы также можемwebpackв конфигурации.
Например:
entry: [
require.resolve('./polyfills'),
path.resolve('./index')
]
polyfills.jsСодержимое файла следующее:
//当然，还可能有一些其它的 polyfill，例如 stage 4之前的一些 polyfill
import '@babel/polyfill';
Теперь наш код отлично работает как в браузерах с низкой, так и с высокой версией (или в средах узлов). Однако во многих случаях нам не обязательно нужен полный@babel/polyfill, что увеличит размер нашего окончательного пакета,@babel/polyfillРазмер пакета 89K (на данный момент@babel/polyfillверсия 7.7.0).
Чего мы ожидаем больше, так это того, что если я использую новую функцию, то добавлю соответствующуюpolyfill, чтобы не создавать бесполезный код.
К счастью,BabelЭто было принято во внимание.
@babel/preset-envпредоставилuseBuiltInsпараметр, установленное значениеusage, он будет включать только то, что нужно кодуpolyfill. Одно замечание: настройте этот параметр на значениеusage, должны быть установлены одновременноcorejs(Если не установлено, выдаст предупреждение, по умолчанию "corejs": 2), примечание: его все равно нужно установить здесь@babel/polyfill(ток@babel/polyfillВерсия установит "corejs" по умолчанию: 2):
Сначала поговорим об использованииcore-js@3причина,core-js@2В ветку не будут добавлены новые функции, новые функции будут добавлены вcore-js@3. Например, вы использовалиArray.prototype.flat(), если вы используетеcore-js@2, то он не содержит этой новой функции. Чтобы использовать больше новых функций, рекомендуется использоватьcore-js@3.
Установите зависимости:
npm install --save core-js@3
core-js (нажмите, чтобы узнать больше): модульная стандартная библиотека для JavaScript, включающая
Promise,Symbol,Iteratorи многие другие функции, он позволяет загружать только необходимые функции.
Теперь изменитеBabelФайл конфигурации выглядит следующим образом:
//.babelrc
const presets = [
[
"@babel/env",
{
"useBuiltIns": "usage",
"corejs": 3
}
]
]
BabelВесь код проверяется на отсутствующую функциональность в целевой среде, и только необходимаяpolyfillвключены.
Например,src/index.jsКод остается прежним:
const isHas = [1,2,3].includes(2);
const p = new Promise((resolve, reject) => {
resolve(100);
});
Посмотрим на скомпилированный файл (lib/index):
"use strict";
require("core-js/modules/es.array.includes");
require("core-js/modules/es.object.to-string");
require("core-js/modules/es.promise");
var isHas = [1, 2, 3].includes(2);
var p = new Promise(function (resolve, reject) {
resolve(100);
});
Тот же код, который мы используемwebpackстроить (productionmode), вы можете видеть, что окончательный размер кода составляет всего 20 КБ. а если представить всю@babel/polyfillЕсли это так, размер собранного пакета: 89 КБ.
Как упоминалось ранее, вuseBuiltInsЗначение параметраusage, еще нужно установить@babel/polyfill, хотя он, кажется, не используется в нашем преобразовании кода выше, но если мы используем его в исходном кодеasync/await, то скомпилированный код долженrequire("regenerator-runtime/runtime"),существует@babel/polyfill, конечно, вы также можете просто установитьregenerator-runtime/runtimeзамена установки@babel/polyfill.
В этот момент уже здорово, хочешь подпрыгнуть и повернуться?
Вот что я скажу, может быть, вы уже знаете, может быть, нет, это не имеет значения, но с этого момента вам нужно знать:Babelбудет использовать небольшую вспомогательную функцию для достижения чего-то вроде_createClassи другие общедоступные методы. По умолчанию он будет добавлен (inject) в каждый файл, который в этом нуждается.
Если нашsrc/index.jsТакова, что:
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
};
getX() {
return this.x;
}
}
let cp = new ColorPoint(25, 8);
составленоlib/index.js,Следующим образом:
"use strict";
require("core-js/modules/es.object.define-property");
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var Point =
/*#__PURE__*/
function () {
function Point(x, y) {
_classCallCheck(this, Point);
this.x = x;
this.y = y;
}
_createClass(Point, [{
key: "getX",
value: function getX() {
return this.x;
}
}]);
return Point;
}();
var cp = new ColorPoint(25, 8);
Вроде проблем нет, но если подумать, если у вас 10 файлов с помощью этогоclass, Означает ли это, что_classCallCheck,_defineProperties,_createClassЭти методыinject10 раз. Это, очевидно, приводит к большему размеру пакета, и самое главное, нам это не нужно.injectнеоднократно.
В это время это@babel/plugin-transform-runtimeПришло время плагинам вступить в игру, используйте@babel/plugin-transform-runtimeплагин, все хелперы будут ссылаться на модуль@babel/runtime, что позволяет избежать повторения вспомогательных программ в скомпилированном коде и эффективно уменьшить размер пакета.
@babel/plugin-transform-runtime
@babel/plugin-transform-runtimeявляется многоразовымBabelДобавлены помощники для сохранения плагинов размера кода.
Примечание: например
Array.prototype.flat()и т. д. методы экземпляра не будут работать, так как это потребует модификации существующих встроенных функций (вы можете использовать@babel/polyfillрешить эту проблему) ——> Следует отметить, что если вы настраиваетеcorejs3,core-js@3Методы прототипа теперь поддерживаются без загрязнения прототипа..
Кроме того,@babel/plugin-transform-runtimeнужно и@babel/runtimeС использованием.
Сначала установите зависимости,@babel/plugin-transform-runtimeОбычно используется только во время разработки, но во время выполнения окончательный код должен зависеть от@babel/runtime,так@babel/runtimeОн должен быть установлен как производственная зависимость следующим образом:
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
В дополнение к тому, что было сказано ранее,@babel/plugin-transform-runtimeПомимо уменьшения размера скомпилированного кода, у нас есть еще одно преимущество его использования — он может создать среду песочницы для кода.@babel/polyfillи встроенные программы, которые он предоставляет (например.Promise,Setа такжеMap), они будут загрязнять глобальную область видимости. Хотя это может быть хорошо для приложения или инструмента командной строки, это может быть проблемой, если ваш код представляет собой библиотеку, которую могут использовать другие, или если у вас нет полного контроля над средой, в которой работает ваш код.
@babel/plugin-transform-runtimeбудут использовать эти встроенные псевдонимы какcore-jsпсевдонимы, так что вы можете использовать их беспрепятственно безpolyfill.
Исправлять.babelrcКонфигурация выглядит следующим образом:
//.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime"
]
]
}
перекомпилироватьnpm run compiler, теперь скомпилированное содержимое (lib/index.js):
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var Point =
/*#__PURE__*/
function () {
function Point(x, y) {
(0, _classCallCheck2.default)(this, Point);
this.x = x;
this.y = y;
}
(0, _createClass2.default)(Point, [{
key: "getX",
value: function getX() {
return this.x;
}
}]);
return Point;
}();
var cp = new ColorPoint(25, 8);
Видно, что вспомогательная функция теперь не напрямуюinjectв код, но из@babel/runtimeвведено в. Как упоминалось ранее, используйте@babel/plugin-transform-runtimeГлобального загрязнения можно избежать, давайте посмотрим, как избежать загрязнения.
Исправлятьsrc/index.jsследующим образом:
let isHas = [1,2,3].includes(2);
new Promise((resolve, reject) => {
resolve(100);
});
Скомпилированный код выглядит следующим образом (lib/index.js):
"use strict";
require("core-js/modules/es.array.includes");
require("core-js/modules/es.object.to-string");
require("core-js/modules/es.promise");
var isHas = [1, 2, 3].includes(2);
new Promise(function (resolve, reject) {
resolve(100);
});
Array.prototypeдобавленоincludesметод и новый глобальныйPromiseметод, загрязняет глобальную среду, что не то же самое, что использование@babel/plugin-transform-runtimeНет никакой разницы.
если мы хотим@babel/plugin-transform-runtimeНе только обрабатывать вспомогательные функции, но и загружатьpolyfill, нам нужно дать@babel/plugin-transform-runtimeДобавьте информацию о конфигурации.
Сначала добавьте зависимости@babel/runtime-corejs3:
npm install @babel/runtime-corejs3 --save
Измените файл конфигурации следующим образом (удален@babel/preset-envизuseBuiltInsконфигурации, иначе повторится.Если не верите, можете использоватьasync/awaitСкомпилируйте и попробуйте):
{
"presets": [
[
"@babel/preset-env"
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",{
"corejs": 3
}
]
]
}
Затем перекомпилируйте и посмотрите на скомпилированные результаты (lib/index.js):
"use strict";
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
var _context;
var isHas = (0, _includes.default)(_context = [1, 2, 3]).call(_context, 2);
new _promise.default(function (resolve, reject) {
resolve(100);
});
Видно, что прямой модификации нет.Array.prototypeили добавитьPromiseспособ избежать глобального загрязнения. если выше@babel/plugin-transform-runtimeнастроенcore-js"2", который не содержит экземпляраpolyfillнеобходимо импортировать отдельно.
Фокус: если мы настроим
corejsда3версию, то независимо от того, является ли это методом экземпляра или глобальным методом, он больше не будет загрязнять глобальную среду.
Увидев это, я не знаю, есть ли у вас такой вопрос? Дать@babel/plugin-transform-runtimeнастроитьcorejsОн настолько совершенен, что может превратить вспомогательную функцию в ссылку и динамически импортировать ее.polyfill, и не будет загрязнять глобальную окружающую среду. зачем давать@babel/preset-envпоставкаuseBuiltInsФункция кажется ненужной.
Имея в виду этот вопрос, я создал несколько новых файлов (содержание простое и в основном такое же, с использованием некоторых новых функций), а затем использовалwebpackСборка, вот данные, которые я сравнил:
| серийный номер | .babelrc конфигурация | webpack mode production |
|---|---|---|
| 0 | Не используйте@babel/plugin-transform-runtime
|
36KB |
| 1 | использовать@babel/plugin-transform-runtime, и настроить параметрыcorejs: 3. Не загрязняет глобальную окружающую среду |
37KB |
| 2 | использовать@babel/plugin-transform-runtime, не настраиватьcorejs
|
22KB |
я догадываюсь@babel/runtime-corejs3/XXXсам пакет, чемcore-js/modules/XXXбольше~
Дополнительные знания о плагинах/пресетах
Порядок, в котором перечислены плагины, важен! ! !
Если оба плагина преобразования будут обрабатывать определенный фрагмент кода из «Программы», то либо плагин преобразования, либоpresetПорядок сортировки выполняется последовательно.
- Плагины запускаются перед пресетами.
- Плагины перечислены спереди назад.
- Порядок предустановок обратный (сзади наперед).
Например:
{
"plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-syntax-dynamic-import"]
}
выполнить первым@babel/plugin-proposal-class-properties, после выполнения@babel/plugin-syntax-dynamic-import
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
presetПорядок выполнения такойобратныйДа, сначала выполнить@babel/preset-react, после выполнения@babel/preset-env.
Параметры плагина
плагины иpresetОба могут принимать параметры, и параметры состоят из массива имен плагинов и объектов параметров.presetНастройка параметров также в этом формате.
Такие как:
{
"plugins": [
[
"@babel/plugin-proposal-class-properties",
{ "loose": true }
]
]
}
короткое название плагина
Если имя плагина@babel/plugin-XXX, вы можете использовать короткие имена@babel/XXX :
{
"plugins": [
"@babel/transform-arrow-functions" //同 "@babel/plugin-transform-arrow-functions"
]
}
Если имя плагинаbabel-plugin-XXX, вы можете использовать короткие именаXXX, то же правило применяется кscopeплагин:
{
"plugins": [
"newPlugin", //同 "babel-plugin-newPlugin"
"@scp/myPlugin" //同 "@scp/babel-plugin-myPlugin"
]
}
Создать пресет
Вы можете просто вернуть массив плагинов
module.exports = function() {
return {
plugins: [
"A",
"B",
"C"
]
}
}
presetтакже может содержать другиеpresetи плагины с параметрами.
module.exports = function() {
return {
presets: [
require("@babel/preset-env")
],
plugins: [
[require("@babel/plugin-proposal-class-properties"), { loose: true }],
require("@babel/plugin-proposal-object-rest-spread")
]
}
}
конфигурационный файл
Babel поддерживает файлы конфигурации в нескольких форматах. Эта часть содержания может быть дополнена и понятна, кого волнует, какой файл конфигурации вы используете, лишь бы ваша конфигурация была в порядке (формально)~
всеBabelПараметры API можно настроить, но если параметр требует использования кода JS, вам может потребоваться использовать версию файла конфигурации с кодом JS.
Различные профили могут быть выбраны в соответствии со сценарием использования:
Если вы хотите создать файлы конфигурации программно или если вы хотите скомпилироватьnode_modulesМодули в каталоге: затемbabel.config.jsможет удовлетворить ваши потребности.
Если вам просто нужна простая конфигурация для одного пакета: тогда.babelrcдля удовлетворения ваших потребностей.
babel.config.js
В корневом каталоге проекта создайте файл с именемbabel.config.jsдокумент.
module.exports = function(api) {
api.cache(true);
const presets = [...];
const plugins = [...];
return {
presets,
plugins
};
}
Конкретную конфигурацию можно посмотреть:документация babel.config.js
.babelrc
В корневом каталоге проекта создайте файл с именем.babelrcдокумент:
{
"presets": [],
"plugins": []
}
Конкретная конфигурация может относиться к.babelrc документация
package.json
могу.babelrcИнформация о конфигурации в видеbabelключ (ключ) добавлен вpackage.jsonВ файле:
{
"name": "my-package",
"babel": {
"presets": [],
"plugins": []
}
}
.babelrc.js
а также.babelrcКонфигурация такая же, но можно написать на JS.
//可以在其中调用 Node.js 的API
const presets = [];
const plugins = [];
module.exports = { presets, plugins };
Не знаю, исчерпывающий ли он, но я действительно не могу его написать (если он будет неполным, я добавлю его позже) ~ просто соус ~ Если есть какие-то ошибки, пожалуйста, поправьте меня.
Ссылка на ссылку