@10tera (10tera)posted at 2022-12-22

electronで設定するpreload.tsをうまく動かしたい

Q&A

解決したいこと

Vite + React + Electronを使って環境を構築しています。
ReactとElectronをそれぞれviteを使ってビルドし同時に起動させることでElectron上の描画をReactに任せようとしています。

Electronのmain.tsでpreload.tsを設定しようとしています。
そしてelectron関連のフォルダのvite.config.tsは以下です。
メインプロセス(electron)をviteを使ってdist/main/main.cjsにまとめようとしているのですが、これにpreload.tsが含まれません。原因はmain.ts内からpreload.tsを直接呼び出しているわけではないからだと思うのですが、どうすれば含めれるようになりますか？preload.tsはmain.tsと同じ階層にあります。

発生している問題・エラー

dist/mainにmain.cjsは生成されるがその中にmain.tsしか含められていない。

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

該当するソースコード

typescript/vite.config.ts

import { builtinModules } from 'module'
import {defineConfig} from "vite";
// @ts-ignore

console.log("main vite config called.")
console.log(`__dirname :${__dirname}`)
export default defineConfig({
    root: __dirname,         // メインプロセスディレクトリを指し示す
    base: "./",
    build: {
        outDir: '../dist/main',
        emptyOutDir: true,
        
        lib: {
            entry: 'src/main.ts',   // Electronは現在CommonJs形式のみをサポートしています。
            formats: ['cjs'],
            fileName: () => '[name].cjs',
        },
        
        rollupOptions: {
            
            // include: ["../../dist/renderer"],
            external: [          // 組み込みAPIをパッケージ化しないようRollupに指示する
                'electron',
                ...builtinModules,
            ],
        },
        watch: {
        }
    }
})

typescript/main.js

import {app,BrowserWindow} from "electron";
import path,{join} from "path";

let mainWindow: BrowserWindow | null;

const createMainWindow = () => {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname,"preload.ts")
        }
    });
    if(app.isPackaged){
        mainWindow.loadFile(join(__dirname,"../render/index.html"));
    }
    else{
        mainWindow.loadURL("http://localhost:3000");
    }
}

app.on("ready",() => {
    createMainWindow();
});

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

app.on("activate",() => {
    if(mainWindow === null){
        createMainWindow();
    }
});

自分で試したこと

vite.config.ts内のlibを削除してビルドしてみたのですが、そうすると要らない物までまとめられ、まとめられたものもよくわからないものが出来上がったのでこの方法は間違っていると思いました。
preload.tsをmain.tsから直接呼び出してpreload.ts内の機能をmain.ts内で使うように書くと含められるようになります。が、以下のように

preload:path.join(__dirname,"preload.ts")

設定しただけではmain.cjsにはpreload.tsは含まれませんでした。

version

vite:4.0.0
electron:22.0.0
react:18.2.0

Are you sure you want to delete the question?