如何使用电子将动态安装的Vue插件加载到plugins文件夹中

Question

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

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

我已经建立了安装和卸载插件的功能。 但是我无法要求这些模块进入vue应用程序。 我尝试使用electronic的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动态捆绑插件来解决此问题。 我不能共享整个代码，但是我将共享我使用的方法。

• 首先，我将browserify包含在依赖项中，以便电子将其包含在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是获取所有已启用插件的吸气剂。 plugin.name获取插件的软件包名称。
• 创建此脚本后，程序将使用fs将其写入plugins / 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）之前。

• 现在，我有一个全局可用的BootstrapPlugin插件，可以安装所有其他插件

• 我现在要做的就是在main.js文件（dist / app.js）中使用此插件

Vue.use(window.BootstrapPlugin)

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

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