Как использовать электрон для загрузки плагинов vue, установленных динамически в папку плагинов
Я использую vue с электроном для создания настольного приложения. Я использую плагины vue для расширения функциональности приложения. Эти плагины vue размещаются как модули npm в каталоге npm, которые можно установить из хранилища плагинов приложений с помощью live-plugin-manager, который можно использовать для динамической установки плагинов в каталог плагины.
Я использую webpack для компиляции внешнего интерфейса vue. Когда я напрямую использую эти плагины, они работают отлично. Мне нужно знать, есть ли способ динамически загружать эти плагины из папки при каждом запуске приложения.
Я создал функции для установки и удаления плагинов. Но я не могу требовать эти модули в приложении vue. Я попытался использовать вызов remote.require электрона для извлечения модуля и использовать цикл Vue.use() с загруженным плагином. Но я продолжаю получать ошибку.
// loading plugins
const plugs = await plugins.load()
console.info(plugs)
plugs.forEach(plug => {
console.info(plug.install)
Vue.use(plug)
})
// the plugins.load
const remote = window.require('electron').remote
if (remote) {
const packager = remote.require('./package').default
return packager.requireEnabled()
}
// the packager.requireEnabled() will load the enabled plugins
Эта ошибка появляется каждый раз, когда я использую приведенный выше код.
Uncaught (in promise) Error: Could not call remote function 'install'. Check that the function signature is correct. Underlying error: Vue.use is not a function
at callFunction (C:\Arjun\Tracing Paper Designs\works\Infolks\Tool\infolks-tool\node_modules\electron\dist\resources\electron.asar\browser\rpc-server.js:260:17)
at C:\Arjun\Tracing Paper Designs\works\Infolks\Tool\infolks-tool\node_modules\electron\dist\resources\electron.asar\browser\rpc-server.js:411:10
at EventEmitter.<anonymous> (C:\Arjun\Tracing Paper Designs\works\Infolks\Tool\infolks-tool\node_modules\electron\dist\resources\electron.asar\browser\rpc-server.js:275:21)
at EventEmitter.emit (events.js:194:13)
at WebContents.<anonymous> (C:\Arjun\Tracing Paper Designs\works\Infolks\Tool\infolks-tool\node_modules\electron\dist\resources\electron.asar\browser\api\web-contents.js:418:21)
at WebContents.emit (events.js:194:13)
Ответы 1
Мне удалось решить проблему путем динамического связывания плагинов с помощью обозревать. Я не могу поделиться всем кодом, но я поделюсь методом, который я использовал.
- Прежде всего, я включил браузер в зависимость, чтобы электрон включил его в папку node_modules.
- Затем я установил asar как false при упаковке, чтобы мы могли записать в файл js приложения после сборки.
- Каждый раз, когда приложение запускается, оно создает скрипт загрузки js-плагина, например:
const imports = []
const pluginUses = []
this.enabled.forEach((plugin, i) => {
imports.push(`const plugin${i} = require("./modules/${plugin.name}");`)
pluginUses.push(`Vue.use(plugin${i});`)
})
return `
${imports.join('\n')}
window.BootstrapPlugin = {
install(Vue, opts) {
${pluginUses.join('\n')}
}
}
`
- каждый плагин сохраняется в папку plugins/modules. Зависимости также устанавливаются в папку автоматически при установке.
this.enabled— это геттер, который извлекает все включенные плагины.plugin.nameполучает имя пакета плагина.- Как только этот сценарий будет создан, программа запишет его в плагины /index.js, используя фс.
- У меня есть функция пакета, которая вызывается при запуске приложения.
const browserify = require('browserify')
const fs = require('fs')
const path = require('path')
// ...
function bundle() {
const b = browserify({
entries: [path.join(app.getAppPath(), 'plugins/index.js')],
paths: [path.join(app.getAppPath(), 'plugins/modules'), path.join(app.getAppPath(), 'node_modules')]
})
const stream = fs.createWriteStream(path.join(app.getAppPath(), 'dist/packages.js'))
b.bundle().pipe(stream)
}
Теперь я добавил скрипт dist/packages.js в html-файл перед основным js-файлом (в моем случае это dist/app.js).
Теперь у меня есть доступный по всему миру плагин BootstrapПлагин, который устанавливает все остальные плагины.
Все, что мне нужно сделать сейчас, это использовать этот плагин в файле main.js (dist/app.js)
Vue.use(window.BootstrapPlugin)
const app = new Vue({...})
Надеюсь кому-нибудь поможет :-)