@bitrix/cli — консольный инструмент Битрикс-разработчика, основная цель — упростить и автоматизировать разработку фронтенда для проектов на «Битрикс Управление Сайтом» и «Битрикс24».
@bitrix/cli — это набор консольных команд
bitrix buildдля сборки и транспиляции ES6+ кодаbitrix testдля запуска Mocha тестовbitrix createдля быстрого создания «экстеншна»
В первую очередь,
@bitrix/cliпредназначен для работы с «экстеншнами», шаблонами сайта и шаблонами компонентов.
NPM
$ npm install -g @bitrix/cliYARN
$ yarn global add @bitrix/climodule.exports = {
input: './app.js',
output: './dist/app.bundle.js',
};module.exports = {
// Файл для которого необходимо выполнить сборку.
// Необходимо указать относительный путь
input: string,
// Путь к бандлу, который будет создан в результате сборки
// Обычно это ./dist/<extension_name>.bundle.js
// Необходимо указать относительный путь
output: string || {js: string, css: string},
// Неймспейс, в который будут добавлены все экспорты из файла указанного в input
// Например 'BX.Main.Filter'
namespace: string,
// Списки файлов для принудительного объединения.
// Файлы будут объединены без проверок на дублирование кода.
// sourcemap's объединяются автоматически
// Необходимо указать относительные пути
concat: {
js: Array<string>,
css: Array<string>,
},
// Разрешает или запрещает сборщику модифицировать config.php
// По умолчанию true (разрешено)
adjustConfigPhp: boolean,
// Разрешает или запрещает сборщику удалять неиспользуемый код.
// По умолчанию true (включено).
treeshake: boolean,
// Разрешает или запрещает пересобирать бандлы
// если сборка запущена не в корне текущего экстеншна
// По умолчанию `false` (разрешено)
'protected': boolean,
plugins: {
// Переопределяет параметры Babel.
// Можно указать собственные параметры Babel
// https://babeljs.io/docs/en/options
// Если указать false, то код будет собран без транспиляции
babel: boolean | Object,
// Дополнительные плагины Rollup,
// которые будут выполняться при сборке бандлов
custom: Array<string | Function>,
},
// Определяет правила обработки путей к изображениям в CSS
// Доступно с версии 3.0.0
cssImages: {
// Определяет правило по которому изображения должны быть обработаны
// 'inline' — преобразует изображения в инлайн
// 'copy' — копирует изображения в директорию 'output'
// По умолчанию 'inline'.
type: 'inline' | 'copy',
// Путь к директории в которую должны быть скопированы используемые изображения
output: string,
// Максимальный размер изображений в кб, которые могут быть преобразованы в инлайн
// По умолчанию 14кб
maxSize: number,
// Использовать ли svgo для оптимизации svg
// По умолчанию true
svgo: boolean,
},
resolveFilesImport: {
// Путь к директории в которую должны быть скопированы импортированные изображения
output: string,
// Определяет разрешенные для импорта типы файлов
// По умолчанию ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.gif']
// https://github.com/isaacs/minimatch
include: Array<string>,
// По умолчанию []
exclude: Array<string>,
},
// Определяет правила Browserslist
// false — не использовать (по умолчанию)
// true — использовать файл .browserslist / .browserslistrc
browserslist: boolean | string | Array<string>,
// Включает или отключает минификацию
// По умолчанию отключено
// Может принимать объект настроек Terser
// false — не минифицировать (по умолчанию)
// true — минифицировать с настройками по умолчанию
// object — минифицировать с указанными настройками
minification: boolean | object,
// Включает или отключает преобразование нативных JS классов
// По умолчанию значенение параметра выставляется автоматически на основании browserslist
transformClasses: boolean,
// Включает или отключает создание Source Maps файлов
sourceMaps: boolean,
// Настройки тестов
tests: {
// Настройки локализации
localization: {
// Код языка локализации. По умолчаниию 'en'
languageId: string,
// Включает или выключает автозагрузку фраз в тестах. По умолчанию включено
autoLoad: boolean,
},
},
};Для запуска сборки выполните команду
$ bitrix buildСборщик рекурсивно найдет все файлы
bundle.config.jsи выполнит для каждого конфига сборку и транспиляцию.
Режим отслеживания изменений. Пересобирает бандлы после изменения исходных файлов. В качестве значения можно указать список расширений файлов, в которых нужно отслеживать изменения.
$ bitrix build --watchСокращенный вариант
$ bitrix build -wВариант с отслеживанием изменений в указанных типах файлов
$ bitrix build -w=defaults,json,mjs,svg
defaults— набор расширений файлов которые отслеживаются по умолчанию. Он равенjs,jsx,vue,css,scss.
Режим непрерывного тестирования. Тесты запускаются после каждой сборки.
Обратите внимание, сборка с параметром --test выводит в отчете только статус прохождения
тестов — прошли или не прошли, полный отчет выводит только команда bitrix test.
$ bitrix build --testСборка только указанных модулей. Параметр поддерживается только в корневой с модулями local/js и bitrix/modules.
В значении укажите имена модулей через запятую, например:
$ bitrix build --modules main,ui,landingЗапуск сборки для указанной директории. В значении укажите относительный путь к директории, например:
$ bitrix build --path ./main/install/js/main/loaderСокращенный вариант
$ bitrix build -p=./main/install/js/main/loaderЗапускает сборку указанных экстеншнов. В качестве значения нужно указать имя экстеншна, либо список имен через запятую. Команду можно запускать из любой директории проекта.
$ bitrix build -e=main.core,ui.buttons,landing.mainРежим отслеживания изменений. Запускает тесты после изменения исходных файлов и кода тестов. В качестве значения можно указать список расширений файлов, в которых нужно отслеживать изменения.
$ bitrix test --watchСокращенный вариант
$ bitrix test -wВариант с отслеживанием изменений в указанных типах файлов
$ bitrix test -w=defaults,json,mjs,svg
defaults— набор расширений файлов которые отслеживаются по умолчанию. Он равенjs,jsx,vue,css,scss.
Тестирование только указанных модулей. Параметр поддерживается только в корневой директории репозитория. В значении укажите имена модулей через запятую, например:
$ bitrix test --modules main,ui,landingЗапуск тестов для указанной директории. В значении укажите относительный путь к директории, например:
$ bitrix test --path ./main/install/js/main/loaderСокращенный вариант
$ bitrix test -p=./main/install/js/main/loaderЗапускает тесты в указанных экстеншнах. В качестве значения нужно указать имя экстеншна, либо список имен через запятую. Команду можно запускать из любой директории проекта.
$ bitrix test -e=main.core,ui.buttons,landing.mainДля создания «экстеншна»
- Перейдите в директорию
local/js/{module} - Выполните команду
bitrix create - Ответьте на вопросы мастера