Webpack 如何 require.node 文件（在 Vue Electron 中使用 WebChimera.js package）

Question

我正在尝试在我的 Electron 应用程序中包含一个正在播放的 VLC 视频，这可以通过WebChimera.js 实现。 This package is distributed a bit weirdly (to me at least), to use it you need to require wcjs-prebuilt , specify some settings in package.json and configure Webpack to allow importing.node files as explained in this Wiki page for WebChimera. js 。

但是我相信这个 Wiki 页面已经过时了，因为加载器在 Webpack 配置中不再是有效的密钥。 我对使用 Webpack 不是很有经验，所以大部分对我来说都是新的。 另请注意，此 Wiki 解释使用了 node-loader 的一个分支，尽管这个分支现在似乎已合并到实际的 node-loader (?)。

我现在使用这个 Webpack 配置：

    target: 'node',
    node: {
        __dirname: false,
    },
    module: {
        rules: [
            {
                test: /\.node$/,
                loader: 'node-loader',
            },
        ],
    },
    externals: [
        'wcjs-prebuilt',
    ],

因为node-loader 的 Webpack 页面似乎就是这样做的。 但是，这对我不起作用，因为现在我收到错误： Uncaught ReferenceError: exports is not defined in the chunk-vendors.js:1 file。 这可能意味着它正在尝试在不应该的地方使用 require 语法，但我不知道如何在此处进行。 当我注释掉所有与 WebChimera 相关的代码时，这个错误仍然发生在一个空的 vue-electron 项目（这里的模板）中。 我在这个项目中用于测试的 WebChimera 代码（现在我只是想让它工作）：

const wcjs = require("wcjs-prebuilt");
console.log(wcjs)

当我删除上面显示的 webpack 配置时，关于exports is not defined的错误消失了，这就是为什么我认为这是我的 webpack 配置中的内容，而不是我的代码导致该错误。

长话短说，我想知道如何配置 webpack 以允许我导入或需要 a.node 文件。

Answer 1

我可以使用这样的vue.config.js使用wcjs-prebuilt vue electron 。 您还需要正确设置VLC_PLUGIN_PATH否则视频将无法播放。

module.exports = {
    configureWebpack: {
        externals: {
            'wcjs-prebuilt': 'commonjs wcjs-prebuilt'
        },
    },
    chainWebpack: (config) => {
        config.module
            .rule('node')
            .test(/.node$/i)
            .use('node-loader')
            .loader('node-loader')
            .end()
    },
    pluginOptions: {
        electronBuilder: {
            externals: ['wcjs-prebuilt']
        }
    }
}

Answer 2

自从发布问题后，我已经切换到 mpv.js 进行视频播放，所以这对我来说不再是问题。 然而，在发布这个问题之后，我做了很多实验，在我终于让它在 Webpack 中以某种方式工作（见下面的第一个链接）之后，它对我有用，但视频失真。 节点文件向数组中添加了一些属性，Webpack 以某种方式剥离了这些属性，从而导致视频渲染器中缺少一些值。 我通过分叉 WebChimera 并编辑 C++ 代码来解决这个问题，这样这些值就不会作为属性添加，而是作为单独的值添加。

我最终分叉了 WebChimera.js、wcjs-prebuilt、wcjs-renderer 和 libvlc_wrapper 以使 VLC 最终与 Webpack+Electron 一起工作，所有这些可能都不是必需的，但是好吧..

可能感兴趣的人的链接：

https://github.com/RuurdBijlsma/vlc-video-demo （在 Electron+Webpack+Vue 项目中使用 VLC 的工作演示项目。）

https://github.com/RuurdBijlsma/libvlc_wrapper

https://github.com/RuurdBijlsma/wcjs-renderer

https://github.com/RuurdBijlsma/WebChimera.js

https://github.com/RuurdBijlsma/wcjs-prebuilt