在 webapck 中使用 sqlite3 和 electron，反应和 typescript

Question

我正在尝试使用 react 和使用 web 包的 electron 创建应用程序。 我想使用 sqlite3 进行数据存储，但我似乎无法使用与其关联的节点模块。

我使用的样板来自： https://github.com/sprout2000/electron-react-ts#readme

我试图添加到 webpack.config.ts

externalsType: 'commonjs',
externals: { 'sqlite3':'sqlite3' },

但它给了我“未捕获的 ReferenceError：require is not defined”的错误我尝试了其他外部类型但没有成功。

这是我在主文件中编辑的唯一内容。 应用程序.tsx

import { useState } from 'react';
import './App.css';
import sqlite3 from 'sqlite3';

const db = new sqlite3.Database('./database.db');
db.serialize(function () {
  db.all("select name from sqlite_master where type='table'", function (tables) {
      console.log(tables);
  });
});

const App = () => {
  const [count, setCount] = useState(0);
  
  return (
    <div className="container">
      <h1>{count}</h1>
      <button onClick={() => setCount((count) => count + 1)}>Count</button>
    </div>
  );
};
export default App;

有没有人遇到这个问题并解决它？ 先感谢您！

Answer 1

我真的应该写一篇关于如何将 sqlite3 与 Electron 连接起来的帖子，但是您尝试做的事情是可能的。 如果您不熟悉基础知识，我鼓励您阅读这篇关于在 Electron 应用程序中使用require的文章。

TL；DR - 您不能在 Electron 的视图中使用require 。 您require在您的main.js进程/文件中使用这个“require'd”模块，然后从您的视图中使用 IPC（进程间通信）。

这样的事情应该让你开始

main.js

const {
    app,
    BrowserWindow,
    ipcMain
} = require("electron");
const sqlite3 = require("sqlite3");
const {
    open
} = require("sqlite");
const fs = require("fs");
const path = require("path");

let win;

async function createWindow() {
    win = new BrowserWindow({
        title: "MyAppTitle",
        webPreferences: {
            preload: path.join(__dirname, "preload.js")
        }
    });

    win.loadFile(path.join(__dirname, "../src/index.html"));

    win.on("closed", () => {
        win = null;
    });
}

app.on("ready", createWindow);

// This is called when requested from the view
ipcMain.on("RequestFromView", (event, args) => {

    (async () => {

        // Open sqlite3 database
        const db = await open({
            filename: path.join(__dirname, "../db/mydatabase.db"),
            driver: sqlite3.Database
        });

        const queryResult = await db.get(args.query);

    })();

    // send back to the renderer process that we are complete
    if (typeof win !== "undefined" && win !== null) {
        win.webContents.send("DoneWithQuery", {
            myResult: true
        });
    }
});

app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {
        app.quit();
    }
});

app.on("activate", () => {
    if (win === null) {
        createWindow();
    }
});

preload.js

const {
    contextBridge,
    ipcRenderer
} = require("electron");

contextBridge.exposeInMainWorld("api", {
    query: function (query) {
        ipcRenderer.send("RequestFromView", {
            query
        });
    },
    doneWithQuery: function (callback) {
        ipcRenderer.on("DoneWithQuery", (event, args) => {
            callback(args);
        });
    }
});

应用程序.tsx

import { useState } from 'react';
import './App.css';
import sqlite3 from 'sqlite3';

window.api.doneWithQuery(function(data){
    console.log(data.myResult); // true
});
window.api.query("select name from sqlite_master where type='table'");


const App = () => {
  const [count, setCount] = useState(0);
  
  return (
    <div className="container">
      <h1>{count}</h1>
      <button onClick={() => setCount((count) => count + 1)}>Count</button>
    </div>
  );
};
export default App;