帶有電子的 Vue CLI - 使用本機模塊時出現意外字符 (1:0)

Question

在一些流行的 NodeJS 庫中，例如 ssh2 或 node-pty，有本地編譯的代碼作為庫的一部分。 創建項目

vue create my-project
vue add electron-builder
yarn add ssh2

然后在后台進程中導入和使用 ssh2 的Client導致在electron:build期間出現以下錯誤

ERROR  Failed to compile with 1 errors                                                                                                                                        5:29:10 PM

 error  in ./node_modules/cpu-features/build/Release/cpufeatures.node

Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

 @ ./node_modules/cpu-features/lib/index.js 1:16-60
 @ ./node_modules/ssh2/lib/protocol/constants.js
 @ ./node_modules/ssh2/lib/client.js
 @ ./node_modules/ssh2/lib/index.js
 ...

此錯誤發生在許多其他庫或傳遞依賴項中，其原因是 Webpack 鏈上缺少native-ext-loader 。 我明白為什么默認情況下不包含它，我想看看添加它的最佳方法是什么。

Answer 1

我發現的一種解決方案是：

1. 添加yarn add -D native-ext-loader （我的版本是 2.3.0，electron 是 13.x）
2. 調整vue.config.js並添加chainWebpackMainProcess如下：

const path = require('path')
module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        // options placed here will be merged with default
        mac: {
          target: 'dmg',
          icon: 'build/icon.icns',
          asar: true
        }
      },
      preload: 'src/preload.ts',
      chainWebpackMainProcess(config) {
        config.module
          .rule("node")
          .test(/\.node$/)
          .use("native-ext-loader")
          .loader("native-ext-loader")
          .options(
            process.env.NODE_ENV === "development"
              ? {
                rewritePath: path.resolve(__dirname, "native"),
              }
              : {}
          )
      }
    }
  }
}

現在， electron:build和electron:serve都在工作，ssh2 客戶端很高興地通過 ipcMain 將標准輸出傳送到渲染器。 不過，不確定這是解決它的最優雅的方法。