VITEと一体化した電子CLI

電子ビイト

An Electron CLI integrated with Vite

機能

⚡️同じように使うVite

🔨メインプロセスとレンダラプロセスのソースコードの両方をvite

📃メインプロセスとレンダラプロセスのVITE構成は

📦プリセット最適ビルド構成

🚀レンダラ過程のためのHMR

用途

インストール

npm i electron-vite -D

開発＆ビルド

プロジェクトでelectron-vite がインストールされている場合、electron-vite バイナリと直接npx electron-vite またはpackage.json ファイル:

{
  "scripts": {
    "start": "electron-vite preview", // start electron app to preview production build
    "dev": "electron-vite dev", // start dev server and electron app
    "prebuild": "electron-vite build" // build for production
  }
}

レンダラプロセスHMRを使用するには、environment variables ウィンドウブラウザがローカルHTMLファイルまたはリモートURLを読み込むかどうかを確認します.

function createWindow() {
  // Create the browser window
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, '../preload/index.js')
    }
  })

  // Load the remote URL for development or the local html file for production
  if (!app.isPackaged && process.env['ELECTRON_RENDERER_URL']) {
    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
  } else {
    mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'))
  }
}

注意:開発用のレンダラプロセスindex.html ファイルを使用してスクリプトコードを参照する必要があります<script type="module"> .

プロジェクトディレクトリ

├──src
|  ├──main
|  |  ├──index.js
|  |  └──...
|  ├──preload
|  |  ├──index.js
|  |  └──...
|  └──renderer
|     ├──src
|     ├──index.html
|     └──...
├──electron.vite.config.js
└──package.json

始める

クローンelectron-vite-boilerplate またはcreate-electron プロジェクトを足場にするツール.

構成

設定ファイル

走るときelectron-vite コマンドラインから、電子viteは自動的に設定ファイルをelectron.vite.config.js プロジェクトのルート.最も基本的な設定ファイルは次のようになります.

// electron.vite.config.js
export default {
  main: {
    // vite config options
  },
  preload: {
    // vite config options
  },
  renderer: {
    // vite config options
  }
}

また、--config CLIオプション(cwd ):

electron-vite --config my-config.js

ヒントelectron-vite サポートts or mjs 設定ファイル.

コンフィグ

以来electron-vite TypeScript型の船では、IDEのIntelliSenseにJSDOCタイプのヒントを使用できます.

/**
 * @type {import('electron-vite').UserConfig}
 */
const config = {
  // ...
}

export default config

また、defineConfig and defineViteConfig JSDoc注釈を必要とせずにIntelliSenseを提供するヘルパー

import { defineConfig, defineViteConfig } from 'electron-vite'

export default defineConfig({
  main: {
    // ...
  },
  preload: {
    // ...
  },
  renderer: defineViteConfig(({ command, mode }) => {
    // conditional config use defineViteConfig
    // ...
  })
})

ヒント:defineViteConfig からの輸出Vite .

設定リファレンス

参照vitejs.dev

設定プリセット

メインのビルドオプション

outdir :out\main (プロジェクトルートに関連する)

ターゲットnode* , 自動的にノードのターゲットElectron . 例えば、電子17のノードターゲットはnode16.13

リブ.エントリsrc\main\{index|main}.{js|ts|mjs|cjs} (プロジェクトルートに対して)空の文字列が見つからなかった場合は

リブ.形式cjs

ロールローション.外部electron すべての組み込みモジュール

プリロード用のビルドオプション

outdir :out\preload (プロジェクトルートに関連する)

ターゲット:main

リブ.エントリsrc\preload\{index|preload}.{js|ts|mjs|cjs} (プロジェクトルートに対して)空の文字列が見つからなかった場合は

リブ.形式cjs

ロールローション.外部:同じmain

レンダラのビルドオプション

ルート:src\renderer (プロジェクトルートに関連する)

outdir :out\renderer (プロジェクトルートに関連する)

ターゲットchrome* , 自動的に一致するクロムターゲットElectron . 例えば、電子17のクロムターゲットはchrome98

リブ.エントリsrc\renderer\index.html (プロジェクトルートに対して)空の文字列が見つからなかった場合は

polyfillmodulepreload :false , ポリフィルの必要はないModule Preload 電子レンダラ用

ロールローション.外部:同じmain

メインとプリロードのオプションを定義する

ウェブ開発では、Viteは変わるでしょう'process.env.' to '({}).' . これは理にかなって正しい.しかし、nodejs開発では、我々は時々使用する必要がありますprocess.env , so electron-vite このようなグローバル変数置換を再定義するには、config define fieldsを自動的に追加します:

export default {
  main: {
    define: {
      'process.env': 'process.env'
    }
  }
}

注意:既存のプロジェクトでこれらの設定を使用する場合は、VITEプラグインvite-plugin-electron-config

よくある質問

電子アプリが複数の窓を持つとき、どのように、私は構成しますか？

あなたの電子アプリが複数のウィンドウを持っているとき、それは複数のHTMLファイルまたはプリロードファイルがあることを意味します.次のように設定ファイルを変更できます.

export default {
  main: {},
  preload: {
    build: {
      rollupOptions: {
        input: {
          browser: resolve(__dirname, 'src/preload/browser.ts'),
          webview: resolve(__dirname, 'src/preload/webview.ts')
        }
      }
    }
  },
  renderer: {
    build: {
      rollupOptions: {
        input: {
          browser: resolve(__dirname, 'src/renderer/browser.html'),
          webview: resolve(__dirname, 'src/renderer/webview.html')
        }
      }
    }
  }
}

CLIオプション

CLIオプションの完全なリストのために、あなたは走ることができますnpx electron-vite -h プロジェクトで.以下のフラグはコマンドラインインターフェイスを使用します.

--ignoreConfigWarning : ブール、設定がないときに警告を無視します

--outDir : string , output directory (デフォルト: out )

API

ビルド

タイプシグネチャ

async function build(inlineConfig: InlineConfig = {}): Promise<void>

使用例

const path = require('path')
const { build } = require('electron-vite')

;(async () => {
  await build({
    build: {
      outDir: 'out'
      rollupOptions: {
        // ...
      }
    }
  })
})()

CreateServer

タイプシグネチャ

async function createServer(inlineConfig: InlineConfig = {}): Promise<void>

使用例

const { createServer } = require('electron-vite')

;(async () => {
  await createServer({
    server: {
      port: 1337
    }
  })
})()

プレビュー

タイプシグネチャ

async function preview(inlineConfig: InlineConfig = {}): Promise<void>

使用例

const { preview } = require('electron-vite')

;(async () => {
  await preview({})
})()

インライン

インタフェースを拡張するUserConfig 追加のプロパティ

ignoreConfigWarning : 設定するfalse コンフィグがないときに警告を無視するには

省略するbase ベースのパブリックパスを電子に設定する必要がないため、プロパティを指定します.

解像度

タイプシグネチャ

async function resolveConfig(
  inlineConfig: InlineConfig,
  command: 'build' | 'serve',
  defaultMode = 'development'
): Promise<ResolvedConfig>