@bitrix/cli

@bitrix/cli — консольный инструмент Битрикс-разработчика, основная цель — упростить и автоматизировать разработку фронтенда для проектов на «Битрикс Управление Сайтом» и «Битрикс24».

Содержание

1. Описание
2. Установка
3. Конфигурация
4. Сборка
5. Запуск тестов
6. Создание экстеншна

@bitrix/cli — это набор консольных команд

1. bitrix build для сборки и транспиляции ES6+ кода в кросс-браузерный ES5
2. bitrix test для запуска Mocha тестов
3. bitrix create для быстрого создания «экстеншна»

В первую очередь, @bitrix/cli предназначен для работы «экстеншнами», шаблонами сайта и шаблонами компонентов.

NPM

$ npm install -g @bitrix/cli

YARN

$ yarn global add @bitrix/cli

Базовая конфигурация

module.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, 
    },

    // Доступно с версии 3.0.0
    resolveFilesImport: {
        // Путь к директории в которую должны быть скопированы импортированные изображения 
        output: string,
        
        // Определяет разрешенные для импорта типы файлов
        // По умолчанию ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.gif']
        // https://github.com/isaacs/minimatch
        include: Array<string>,

        // По умолчанию []
        exclude: Array<string>,
    },   
};

Для запуска сборки выполните команду

$ bitrix build

Сборщик рекурсивно найдет все файлы bundle.config.js и выполнит для каждого конфига сборку и транспиляцию.

Дополнительные параметры

--watch, -w

Режим отслеживания изменений. Пересобирает бандлы после изменения исходных файлов.

$ bitrix build --watch

--test, -t

Режим непрерывного тестирования. Тесты запускаются после каждой сборки. Обратите внимание, сборка с параметром --test выводит в отчете только статус прохождения тестов — прошли или не прошли, полный отчет выводит только команда bitrix test.

$ bitrix build --test

--modules, -m

Сборка только указанных модулей. Параметр поддерживается только в корневой c модулями local/js и bitrix/modules. В значении укажите имена модулей через запятую, например:

$ bitrix build --modules main,ui,landing

--path, -p

Запуск сборки для указанной директории. В значении укажите относительный путь к директории, например:

$ bitrix build --path ./main/install/js/main/loader

$ bitrix test

Команда запускает Mocha тесты и выводит подробный отчет о прохождении тестов.

Тестами считаются JS файлы, расположенные в директории ./test, относительно файла bundle.config.js. В момент запуска тестов исходный код и код тестов, налету обрабатывается сборщиком и после чего выполняется. Поэтому тесты можно писать на ES6+

Дополнительные параметры

--watch, -w

Режим отслеживания изменений. Запускает тесты после изменения исходных файлов и кода тестов.

$ bitrix test --watch

--modules, -m

Тестирование только указанных модулей. Параметр поддерживается только в корневой директории репозитория. В значении укажите имена модулей через запятую, например:

$ bitrix test --modules main,ui,landing

--path, -p

Запуск тестов для указанной директории. В значении укажите относительный путь к директории, например:

$ bitrix test --path ./main/install/js/main/loader

Для создания «экстеншна»

1. Перейдите в директорию local/js/{module}
2. Выполните команду bitrix create
3. Ответьте на вопросы мастера