Как устанавливать плагины Vue в битрикс?

Question

[Александр Маджугин]

Я не настоящий фронтэдщик и поэтому инструкции вроде "выполните npm i названиепакета" меня вообще в тупик ставят. Где это вообще выполнить?

Т.е. понятно что это надо делать в "каталоге проекта". Но что такое "каталог проекта" в реальных условиях?

А уж тем более я в тупике относительно того как это сделать приминительно к bitrix. Т.е. я могу делать свои плагины, собирать их с помощью bitrix cli и подключать в виде расширений в терминах битрик, но как это проделать со сторонним плагином?

Comments

[WapSter]

В ответах мы тебе должны написать доку по node js, vue cli, разобрать как работает REST Api и прочие сопутсвующие вещи?

[Артем Житник]

Любит битрикс велосипеды городить.

[Александр Маджугин]

WapSter, нет, достаточно просто учесть что есть люди работающие с реальными проектами на реальных серверах, а не играющиеся с нодой на локолхосте венды.

[Александр Маджугин]

Артем Житник, это да. То свой собственный урезанный jQuery напишут, то вот свой сборщик придумали. Хорошо хоть Vue без изменений взяли.

Answer 1

[PetrPo]

Опережая ответ, бросай это неблагодарное дело)

youtube, лучше смотри после прочтения ответа

Думаю первые два пункта очевидны, но напишу
1. Устанавливаешь node.js
Через консоль
2. Устанавливаешь bitrix cli
npm install -g @bitrix/cli

Дальше судя по логике человека из видоса, если у тебя не SPA, а у тебя наверняка не SPA:
3. Создаешь экстеншен для vue (или другого) плагина, в консоли переходишь в папку /local/js/имя_модуля/
bitrix create
отвечаешь на вопросы, имя твоего экстеншена должно быть без точек

4. Переходишь в папку с экстеншеном, пишешь
npm init

5. Скачиваешь нужный плагин
npm i названиепакета
проверь что в package.json он добавился

6. В редакторе открываешь bundle.config.js в нем добавляешь

plugins: {
	resolve: true,
},

7. Открываешь файл в папке src, который создался через bitirx create, в нем все стираешь и пишешь import плагина, как пример

import React from 'react'

export {React}

8. В консоли (проверь что находишься в папке со своим экстеншеном , а не где-нибудь в корне, иначе ядро сбандлишь и будет плохо)
bitrix build

9. Смотришь bundle в папке dist, если все ок, там должен быть транспилированный код твоего плагина

Теперь можешь юзать через битриксовое api

\Bitrix\Main\UI\Extension::load("имя_модуля.имя_экстеншена")

import React from 'имя_модуля.имя_экстеншена';

loadExtension('имя_модуля.имя_экстеншена').then(() => {
    // Код который использует `main.loader`
});

P.S.
Сам я пробовал react устанавливать, но у него в файлах используются переменные окружения node.js и т.к. они не определены js валится, как с этим быть я не разобрался и поэтому забил, может с другими плагинами норм будет.

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

Comments

[Александр Маджугин]

Спасибо - оч. подробно и понятно.
Мне нужно было только пункты 4-7. Так-то я сам экстеншены пишу и собираю - у меня была непонятка как со сторонним быть. Завтра попробую.

[PetrPo]

Александр Маджугин, ок, напиши потом, получилось или нет)

[PetrPo]

Александр Маджугин, поправил пункт 7, забыл export

[Александр Маджугин]

Получилось.

Кратко вот какой инфы мне не хватало - устанавливаться плагин нужно в папке экстеншена который будет его использовать.
Тут не оч. понятно что делать если плагин нужен нескольким экстеншенам, но есть очевидный способ создать экстеншен-обертку или пустой экстеншен, в котором сделать экспорт, как собственно вы и предложили в пункте 7.

Т.е. если совсем кратко то нужно было перейти в папку экстеншена, сделать там npm i пакет, добавить
plugins: {
resolve: true,
},
и все.

Далее в самом экстеншене так например:

import createMutationsSharer from "vuex-shared-mutations";

const store = BX.Vuex.store(
{
    strict: APP.data.env.stage == 'dev',
    state: Object.assign({
            // собственные состояния
        },APP.data),
    getters: {
        isFavorite: (state) => id => {
			for (var i in state.user.favorites) {
				if (state.user.favorites[i] == id) return true;
			}
			return false;
		},
    },
    
    actions: {
        favorite_toggle ({commit, getters}, params) {
            BX.ajax.runAction('xmm:solar.api.favorite.'+params.action, {
                    data: {id: params.id}
                })
                .then(function (response) {
                    if (response.status == 'success') {
                        commit('update',{'user':{'favorites':response.data}});
                        commit('inc');
                    }
                    
                    SendFavoriteEsputnik();
                }, function (response) {
                    console.log(response);
                });
			
        },
    },
    
    mutations: {
        update (state,data) {
            for (let k in data) BX.Vue.set(state,k,data[k]);
        }
    },
    
    
    plugins: [createMutationsSharer({ predicate: ['update'] })]
});

export {store};

Answer 2

[no_one_safe]

А причем тут Битрикс вообще? Это просто бекенд, который ничем не отличается от других бекендов. Хоть в Битриксе, хоть где все устанавливается не зависимо от этого.
Каталог проекта - директория, в которой находится файл package.json, в котором и прописываются правила установки (что устанавливать)
Если что, я также ни разу не фронтенд.

Comments

[Алексей Уколов]

В Битриксе есть свой сборщик фронтэнда.

[Александр Маджугин]

У битрикса свой встроенный Vue и свой сборщик (очевидно обертка над чем-то)
Никакого pakage.json там нет. Библиотеки прописываются в специальных конфигах и инклюдятся через API.

Как собрать отдельно проект я в среднем представляю, но тут не тот случай.

Я бы взял плагин и сделал бы из него собственное расширение битрикс но я не понимаю как взять плагин отдельно - все npmшменпм полностью лишают разработчика контроля над кодом.
И блин нигде нет инфы как просто подключить в страницу этот плагин.