在 Angular + Electron 应用程序中使用 better-sqlite3：模块解析失败：意外字符

Posted 2023-03-14

【中文标题】在 Angular + Electron 应用程序中使用 better-sqlite3：模块解析失败：意外字符

【英文标题】：Using better-sqlite3 in an Angular + Electron app: Module parse failed: Unexpected character

【发布时间】：2020-06-07 08:22:56

【问题描述】：

在我的Angular + Electron app 中，我正在尝试安装一些 sqlite 库，以便从 sqlite 数据库文件中读取内容。

我已经安装了better-sqlite3 使用：

npm install --save better-sqlite3 
npm install --save-dev @types/better-sqlite3

我已经尝试用它来做：

import * as sqlite from 'better-sqlite3';

// ...

const myDb = sqlite('/path/to/file.sqlite');

但是，当应用程序构建失败时：

./node_modules/better-sqlite3/build/better_sqlite3.node 1:0 中的错误 模块解析失败：意外字符 '' (1:0) 您可能需要一个 合适的加载器来处理这种文件类型，目前没有加载器 配置为处理此文件。看 https://webpack.js.org/concepts#loaders（此处省略源代码 二进制文件）./node_modules/integer/build/integer.node 1:0 中的错误 模块解析失败：意外字符 '' (1:0) 您可能需要一个 合适的加载器来处理这种文件类型，目前没有加载器 配置为处理此文件。看 https://webpack.js.org/concepts#loaders（此处省略源代码 二进制文件）

看起来我不是第一个在使用 Electron 时遇到这个问题的人。事实上，这个问题已经在here 和here 讨论过，但是我找不到适合我的解决方案。

【参考方案1】：

你试过用@angular-builders/custom-webpack吗？

npm i @angular-builders/custom-webpack --save-dev

在您的 angular.json 文件中，将其设置在您的架构师下：

"architect": 
  "build": 
    "builder": "@angular-builders/custom-webpack:browser",
    "options": 
      "customWebpackConfig": 
        "path": "./angular.webpack.js"
      ,

然后在项目的根目录下添加一个自定义配置文件 angular.webpack.js：

module.exports = 
  externals: 
    'better-sqlite3': "require('better-sqlite3')"
  
;