@bitrix/cli + stylus less

10 ноября 202210 ноя 2022

2 мин

Оглавление

Установка @bitrix/cli
Создание расширения
Поддержка Stylus и Less

Если вы предпочитаете использовать при разработке stylus или less, которые по умолчанию не поддерживаются в @bitrix/cli , то можно легко добавить такую поддержку.

Речь идет об инструменте из оф. документации https://dev.1c-bitrix.ru/learning/course/index.php?COURSE_ID=105&LESSON_ID=12435&LESSON_PATH=9209.4776.3635.12435

Предполагаю что у вас уже установлен Node.js и npm. Примеры команд при разработке в Linux.

Установка @bitrix/cli

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

npm install -g @bitrix/cli

Создание расширения

Предположим что мы создаем расширение, которое будет храниться в директории /local/js/ и будет называться extension. Переходим в директорию и создаем решение

cd /home/bitrix/www/local/js

bitrix create extention

cd extention/

Посмотрим где мы находимся

pwd
# /home/bitrix/www/local/js/extention

Посмотрим список файлов в директории

ls -h
# bundle.config.js config.php dist lang src

Поддержка Stylus и Less

Находим где распологаются исходники бинарника bitrix

whereis bitrix
#bitrix: /home/bitrix/.nvm/versions/node/v14.18.3/bin/bitrix

Переходим в директорию и устанавливаем все пакеты для пересборки бинарника, а также пакеты stylus и less

cd /home/bitrix/.nvm/versions/node/v14.18.3/
cd lib/node_modules/@bitrix/cli/

pwd
# /home/bitrix/.nvm/versions/node/v14.18.3/lib/node_modules/@bitrix/cli

npm install
npm install stylus
npm install less

После успешной установки, находясь в той же директории, включаем отслеживание файлов *.styl и *.less, для этого редактируем файл src/tools/watch.js. Находим соответствующий кусов кода и дополняем его

function createPattern(directories) {
return directories.reduce((acc, dir) => {
const directory = new Directory(dir);
const directoryConfigs = directory.getConfigs();

directoryConfigs.forEach((currentConfig) => {
acc.push(slash(path.resolve(currentConfig.context, '**/*.js')));
acc.push(slash(path.resolve(currentConfig.context, '**/*.css')));
acc.push(slash(path.resolve(currentConfig.context, '**/*.scss')));

// добавляем эти 2 строки ниже
acc.push(slash(path.resolve(currentConfig.context, '**/*.styl')));
acc.push(slash(path.resolve(currentConfig.context, '**/*.less')));
});

return acc;
}, []);
}

Также правим файл src/utils/is-allowed.js

switch (ext) {
case '.js':
case '.jsx':
case '.css':
case '.scss':
// добавляем эти 2 строки ниже
case '.styl':
case '.less':
return true;
default:
return false;
}

Теперь пересобираем, находясь в той же папке