Bitrix Framework

Currently, you cannot connect modules within Bitrix Framework using npm npm — node package manager, included into Node.js.

Learn more... (folder node_modules), presently this feature is under development and will be available at a later date. Now, if you want to use external libraries, you need to collect them in the Bitrix format of JS Extension Extensions is method for organizing JS and CSS code in Bitrix24 products.

Learn more... .

This way, to integrate a third-party library, you need to find a suitable version of ESM ESM (or ECMAScript modules) - module format, created as part of standard ECMAScript. It was standartized in the ECMAScript version ES6. ES Modules are designed to solve a very important JavaScript issue: missing method for code exchange between scenarios , and then "wrap" into Bitrix JS Extension (extension) with clear export.

Let's examine vue-router (available in the supplied source code for delivery in the folder /bitrix/modules/ui/install/js/ui/vue3/router/).

The algorithm is as follows:

1. Find the version of ESM (ECMAScript Modules). For example, take a version of router here. Define it as basic extension script.
2. Delete all the redundant imports and add dependencies, if required.
3. Execute export.

Example vue-router.js is sourced from folder /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

[... original library code is here ...]

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

After the abovementioned actions, this extension will be used inside Bitrix Framework.