На текущий момент в рамках Bitrix Framework нельзя подключить модули через npm npm — менеджер пакетов, входящий в состав Node.js.

Подробнее... (папку node_modules), но такую поддержку мы прорабатываем и добавим, как только она будет реализована. Сейчас для использования внешних библиотек необходимо собрать их в формате Bitrix JS Extension Расширение (экстеншн, extension) — способ организации JS и CSS кода в продуктах 1С-Битрикс: Управление Сайтом и Битрикс24.

Подробнее... .

Таким образом, чтобы взять внешнюю библиотеку и встроить её, нужно найти подходящую версию ESM ESM (или модули ECMAScript) — это формат модуля, созданный как часть стандарта ECMAScript. Он был стандартизирован в версии ES6 ECMAScript. ES Modules призван решить важную проблему в JavaScript: отсутствие встроенного способа обмена кодом между сценариями. , а затем "обернуть" её в Bitrix JS Extension (экстеншн) с понятным экспортом.

Рассмотрим на примере vue-router (есть в исходном коде поставки в папке /bitrix/modules/ui/install/js/ui/vue3/router/).

Алгоритм следующий:

1. Находим версию ESM (ECMAScript Modules). Например, вот версия для роутера. Делаем его базовым скриптом экстеншна.
2. Удаляем все лишние импорты, при необходимости добавляем зависимости.
3. Делаем экспорт.

Пример vue-router.js из папки /bitrix/modules/ui/install/js/ui/vue3/router/src/:

/*!
  * vue-router v4.0.12
  * (c) 2021 Eduardo San Martin Morote
  * @license MIT
  *
  * @source: https://unpkg.com/vue-router@4.0.12/dist/vue-router.esm-browser.js
  */

/**
 * Modify list for integration with Bitrix Framework:
 * - remove import '@vue/devtools-api', add function setupDevtoolsPlugin
 */

import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, nextTick } from 'ui.vue3';

function getDevtoolsGlobalHook() {
  return getTarget().__VUE_DEVTOOLS_GLOBAL_HOOK__;
}
function getTarget() {
  // @ts-ignore
  return typeof navigator !== 'undefined'
    ? window
    : typeof global !== 'undefined'
      ? global
      : {};
}

const HOOK_SETUP = 'devtools-plugin:setup';

function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
  const hook = getDevtoolsGlobalHook();
  if (hook) {
    hook.emit(HOOK_SETUP, pluginDescriptor, setupFn);
  }
  else {
    const target = getTarget();
    const list = target.__VUE_DEVTOOLS_PLUGINS__ = target.__VUE_DEVTOOLS_PLUGINS__ || [];
    list.push({
      pluginDescriptor,
      setupFn
    });
  }
}

// origin-start

[... здесь код оригинальной библиотеки ...]

export { NavigationFailureType, RouterLink, RouterView, START_LOCATION_NORMALIZED as START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey };
// origin-end

После вышеописанных действий этот экстеншн можно будет использовать внутри Bitrix Framework.