Перейти к основному содержанию
iotools.cloudiotools.cloud

Генератор конфигурации Babel

Создайте babel.config.json или .babelrc из полей формы: @babel/preset-env (targets, modules, useBuiltIns/corejs), preset-react (runtime, development), preset-typescript, preset-flow, общие плагины синтаксиса/трансформации, переключатель decorators (legacy или current proposal), и переопределения окружения для тестов (Jest) и production (удаление console.*). Также показывает соответствующую команду npm install.

Ввод

Изменяет только комментарий заголовка — тело JSON действительно в любом случае.

Presets

Запрос Browserslist. Оставьте пустым, чтобы использовать собственные .browserslistrc или package.json browserslist field вашего проекта.

Установите false, когда bundler (Webpack/Rollup/Vite) самостоятельно обрабатывает ES модули, чтобы tree-shaking продолжал работать.

Внедрите полифиллы core-js для функций, которых не хватает вашим целям.

React

TypeScript

Flow

Plugins

Опции вывода

Вывод

Сгенерированная конфигурация
Команда установки
Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/babel-config-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "outputFormat": "babel.config.json",
    "presetEnv": "true",
    "envTargets": "> 0.25%, not dead",
    "envModules": "auto",
    "envUseBuiltIns": "usage",
    "envCorejs": "3.38",
    "presetReact": "true",
    "reactRuntime": "automatic",
    "reactDevelopment": "",
    "presetTypescript": "true",
    "tsAllExtensions": "",
    "presetFlow": "",
    "plugins": "[\"@babel/plugin-transform-runtime\",\"@babel/plugi…",
    "pluginDecorators": "true",
    "decoratorsLegacy": "",
    "envTestNodeCurrent": "true",
    "envProdRemoveConsole": "true",
    "includeComments": "true",
    "includeHeader": "true"
  }'

Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.

Спросите у ИИ-агента

Use the IOTools `babel-config-generator` tool (Babel Config Generator) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/babel-config-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Генератор конфигурации Babel — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызова API/MCPОт 5 кредитов
Нужно больше кредитов?Посмотреть тарифы

Также доступно через

ИнтеграцииРасширение для браузераРасширение для VS Code

Руководства

Создайте babel.config.json или .babelrc без ручного ввода имен presets, опций плагинов или точной формы, которую ожидает Babel. Установите флажки для нужных вам presets и плагинов, задайте их опции и скопируйте готовую конфигурацию — плюс соответствующую команду npm install.

Что охватывается

  • @babel/preset-env — targets (browserslist query), modules (auto/false/commonjs) и useBuiltIns (false/usage/entry) с версией corejs.
  • @babel/preset-react — runtime (автоматический для React 17+ или классический) и флаг development.
  • @babel/preset-typescript — с isTSX/allExtensions когда вам нужен синтаксис TSX внутри файлов .ts.
  • @babel/preset-flow.
  • Общие плагины синтаксиса/трансформации: plugin-transform-runtime, plugin-transform-class-properties, plugin-transform-private-methods, plugin-transform-private-property-in-object, plugin-syntax-dynamic-import, plugin-proposal-export-default-from.
  • Decorators — @babel/plugin-proposal-decorators, либо текущая версия предложения TC39, либо decorators legacy-style (старый код Angular/MobX/TypeORM).
  • Переопределения окружения — переопределение test для текущей версии Node (стандартная настройка Jest) и переопределение production которое удаляет вызовы console.*.

Как его использовать

  1. Выберите необходимые вам presets и установите их встроенные опции (targets, modules, useBuiltIns, runtime, …).
  2. Выберите дополнительные плагины из списка multi-select и включите decorators если ваш код их использует.
  3. Переключайте переопределения окружения test/production если они применимы к вашему проекту.
  4. Скопируйте сгенерированный файл в корень проекта как babel.config.json (или .babelrc) и выполните команду установки показанную ниже.

Babel анализирует свои собственные файлы конфигурации лениво — комментарии // в выводе безопасны для сохранения или удаления для более строгого JSON файла.

FAQ

Должен ли я использовать babel.config.json или .babelrc?

babel.config.json это современный опция для всего проекта — применяется ко всем пакетам монорепозитория и файлам node_modules которые вы явно компилируете. .babelrc ограничен одним пакетом в котором он находится. Если только у вас нет причины хранить конфигурацию локально в одном пакете, предпочитайте babel.config.json.

Нужен ли мне @babel/plugin-transform-runtime?

Только если вы хотите чтобы функции-помощники Babel (и полифилленные built-ins с опцией corejs) были общими через @babel/runtime вместо дублирования в каждом скомпилированном файле — это уменьшает размер bundle за счет одной дополнительной зависимости runtime. Пропустите для простого приложения; это наиболее полезно для библиотек.

Нужно проверить конфигурацию после дальнейшего редактирования? Вставьте в JSON Formatter для проверки синтаксиса. Для конфигурации компилятора TypeScript вместо Babel см. tsconfig.json Generator.

Работает полностью в вашем браузере — ничего не загружается.

babelbabelrcbabel.config.jsonpreset-envpreset-reactjsxtranspilerbrowserslistpolyfilldeveloper tools

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу