node.js - 如何使用 Electron 将动态安装的vue插件加载到插件文件夹中

Question

我正在使用带有 Electron 的 vue 来构建桌面应用程序。我正在使用 vue 插件来扩展应用程序的功能。这些 vue 插件作为 npm 模块托管在 npm 目录中，可以使用 live-plugin-manager 从应用程序插件商店安装，该插件可用于将插件动态安装到插件目录中。

我正在使用 webpack 编译 vue 前端。当我直接使用这些插件时，它们可以完美运行。我需要知道是否有任何方法可以在每次应用程序启动时从文件夹中动态加载这些插件。

我已经构建了安装和卸载插件的功能。但我无法将这些模块引入 vue 应用程序。我尝试使用 electron 的 remote.require 调用来获取模块，并使用一个名为 Vue.use() 的循环和加载的插件。但我不断收到错误。

    // loading plugins
    const plugs = await plugins.load()

    console.log(plugs)

    plugs.forEach(plug => {

        console.log(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)

Answer 1

我能够通过使用 动态捆绑插件来解决这个问题。浏览器化 .我不能分享整个代码，但我会分享我使用的方法。

首先，我将 browserify 包含到依赖项中，以便 Electron 将其包含在 node_modules 文件夹中。

然后我在打包的时候将asar设置为false，这样我们打包后就可以写入app的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是一个获取所有启用插件的 getter。 plugin.name获取插件的包名。

创建此脚本后，程序会将其写入 插件/index.js 使用 FS .

我有一个在应用启动时调用的捆绑函数

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 进入主 js 文件之前的 html 文件(在我的例子中是 dist/app.js)。

现在我有一个插件引导插件 全局可用，安装所有其他插件

我现在要做的就是在 main.js 文件 (dist/app.js)

中使用这个插件

Vue.use(window.BootstrapPlugin)

const app = new Vue({...})

希望它可以帮助某人:-)