Webpack 如何需要 .node 文件（在 Vue Electron 中使用 WebChimera.js 包）答案

【问题标题】：Webpack how to require .node file (To use the WebChimera.js package in Vue Electron)Webpack 如何需要 .node 文件（在 Vue Electron 中使用 WebChimera.js 包）
【发布时间】：2021-04-27 21:04:36
【问题描述】：

我正在尝试在我的 Electron 应用中包含一个正在播放的 VLC 视频，这可以通过WebChimera.js 实现。这个包的分发有点奇怪（至少对我来说），要使用它，你需要 wcjs-prebuilt，在 package.json 中指定一些设置并配置 Webpack 以允许导入 .node 文件，如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',
    ],

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

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

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

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

【问题讨论】：

标签： javascript webpack electron

【解决方案1】：

我可以像这样使用vue.config.js 来使用wcjs-prebuilt 构建vue 电子。您还需要正确设置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']
        }
    }
}

【讨论】：

感谢您的回答，我已经切换到 mpv.js 进行视频播放，所以这对我来说不再是问题了。
另外，如果您有兴趣，我在这个问题上添加了我自己的答案，以及我最终为使 VLC 工作所做的工作

【解决方案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

【讨论】：