通过 webpack 使用 webtorrent 和 electro 构建应用程序后的绝对路径

Question

我有一个带有 Electron Forge、webtorrent 和 webpack 的应用程序。我使用 2 个命令创建它：

npm init electron-app@latest my-app -- --template=webpack
yarn add webtorrent

将导入添加到main.js

import WebTorrent from "webtorrent";

并且：

yarn package

此后，我的应用程序只能在我的计算机上运行，因为构建后，应用程序代码中有一个绝对路径：

(0,n.createRequire)("file:///Users/prof1/projects/pw_castle/launcher_test/node_modules/node-datachannel/lib/index.js")("../build/Release/node_datachannel.node")

我不明白为什么会发生这种情况。如果我从 main.js 中删除 webtorrent 导入，则绝对路径将从构建中消失。我知道 webtorrent 需要对 webpack 进行额外的配置。但似乎只有在浏览器中使用时才需要这个？问题仅出在 webtorrent 上，其他库工作正常。我尝试了不同版本的 webtorrent。这对我没有帮助。

我的 webpack.main.config.js （电子锻造的默认值）：

module.exports = {
  entry: './src/main.js',
  module: {
    rules: require('./webpack.rules'),
  },
};

webpack.rules.js（Electron Forge 的默认值）

module.exports = [
  {
    test: /native_modules[/\\].+\.node$/,
    use: 'node-loader',
  },
  {
    test: /[/\\]node_modules[/\\].+\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@vercel/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
];

还有 forge.config.js（Electron Forge 的默认值）：

const { FusesPlugin } = require('@electron-forge/plugin-fuses');
const { FuseV1Options, FuseVersion } = require('@electron/fuses');

module.exports = {
  packagerConfig: {
    asar: true,
  },
  rebuildConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {},
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin'],
    },
    {
      name: '@electron-forge/maker-deb',
      config: {},
    },
    {
      name: '@electron-forge/maker-rpm',
      config: {},
    },
  ],
  plugins: [
    {
      name: '@electron-forge/plugin-auto-unpack-natives',
      config: {},
    },
    {
      name: '@electron-forge/plugin-webpack',
      config: {
        mainConfig: './webpack.main.config.js',
        renderer: {
          config: './webpack.renderer.config.js',
          entryPoints: [
            {
              html: './src/index.html',
              js: './src/renderer.js',
              name: 'main_window',
              preload: {
                js: './src/preload.js',
              },
            },
          ],
        },
      },
    },
    new FusesPlugin({
      version: FuseVersion.V1,
      [FuseV1Options.RunAsNode]: false,
      [FuseV1Options.EnableCookieEncryption]: true,
      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
      [FuseV1Options.EnableNodeCliInspectArguments]: false,
      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
      [FuseV1Options.OnlyLoadAppFromAsar]: true,
    }),
  ],
};

Answer 1

添加到

webpack.rules.js

：

  {
    test: /webtorrent[/\\].+\.node$/,
    use: 'node-loader',
  },

将

webpack.main.config.js

更改为：

const path = require('path');

module.exports = {
  entry: './src/main.js',
  module: {
    rules: require('./webpack.rules'),
  },
  resolve: {
    extensions: ['.js', '.json'],
    alias: {
      // Add any necessary aliases here
    },
    fallback: {
      fs: false,
    },
  },
  output: {
    path: path.join(__dirname, 'dist'), 
    filename: 'main.js',
  },
};

下一个包装前清洁：

yarn clean
yarn package