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