1. 配置files解決打包后找不到代碼文件的問題

在開發(fā)electron項(xiàng)目時(shí)，可能會(huì)遇到這種情況：
使用命令 electron . 啟動(dòng)應(yīng)用，應(yīng)用正常運(yùn)行;
使用electron-builder打包，運(yùn)行打包后的應(yīng)用程序，出現(xiàn)資源404的情況，應(yīng)用無法正常運(yùn)行，如下圖：

無法找到資源資源.png

項(xiàng)目根目錄
|  main：electron主進(jìn)程相關(guān)的代碼
|   └─── main.js
|   └─── preload.js
|  build：打包后的頁(yè)面代碼
|   └─── index.html
|   └─── js文件、css文件、……略
|   package.json
|   ……略

打包后的應(yīng)用程序找不到對(duì)應(yīng)文件是因?yàn)?code>electron-builder打包時(shí)沒有包含必要的“項(xiàng)目代碼文件”，沒有對(duì)應(yīng)的文件自然就404了。
在electron-builder的配置中添加files配置項(xiàng)，包含必要的項(xiàng)目代碼文件即可解決：

{
    productName: 'xxx',
    appId: 'xxx',
    files: ['./main', './build'], // 包含的文件
}

electron-build打包后的Windows應(yīng)用程序文件結(jié)構(gòu)如下：

應(yīng)用程序根目錄
|  locales
|   └─── ……略
|  resources
|   └─── app.asar
|  swiftshader
|   └─── ……略
|  應(yīng)用名.exe
|  ……省略一堆文件

重點(diǎn)看resource文件夾下的app.asar文件，這個(gè)文件就是electron-builder打包后的應(yīng)用入口文件，打開應(yīng)用時(shí)查看console可以看到：

index請(qǐng)求.png

但是app.asar是一個(gè)文件，為什么可以被electron當(dāng)作一個(gè)目錄來使用呢？本人使用文本編輯器打開app.asar粗略的看了一下，發(fā)現(xiàn)所有files配置項(xiàng)指定的代碼文件，都被打包進(jìn)了app.asar這個(gè)文件中。個(gè)人猜測(cè)當(dāng)瀏覽器訪問app.asar/xxx時(shí)，electron會(huì)去app.asar中解析出對(duì)應(yīng)的xxx文件返回給瀏覽器。

2. 除了files之外，electron-builder還有其它文件相關(guān)的配置，可以打包指定文件：

{
    extraFiles: ['filePath'],
    extraResources: ['filePath'],
}

顧名思義，extraFiles為額外文件，extraResources為額外資源，它們的作用就是打包額外的文件；
比如有這么一個(gè)需求：在用戶沒有網(wǎng)絡(luò)時(shí)，為用戶提供某個(gè)靜態(tài)文件的下載；那就必須將這個(gè)靜態(tài)文件打包進(jìn)應(yīng)用程序，用戶下載時(shí)使用electron主進(jìn)程的node程序讀取這個(gè)文件返回給用戶。
或者有和我一樣的需求，為支持puppeteer需要將整個(gè)chromium瀏覽器打包進(jìn)應(yīng)用程序中。

配置extraFiles后，electron-builder會(huì)在打包時(shí)將extraFiles中指定的文件復(fù)制到打包后應(yīng)用程序的根目錄下(Windows/Linux)，或者Content目錄下(MacOS)

配置extraResources后，electron-builder會(huì)在打包時(shí)將extraResources中指定的文件復(fù)制到打包后應(yīng)用程序的根目錄/resources文件夾下(Windows)，或者Content/resources文件夾下(MacOS)

另外，files、extraFiles、extraResources還都支持from-to指定路徑的配置方式，具體參見官方文檔的相關(guān)章節(jié)。

3. 打包后的額外文件，在electron主進(jìn)程中如何獲取呢？如何保證開發(fā)中和打包后的“額外文件路徑”一致呢？

如果你使用的是extraFiles配置項(xiàng)，可以這樣做：

• 將“存放額外文件的文件夾”放在項(xiàng)目根目錄下；
• 配置extraFiles將“存放額外文件的文件夾”打包到應(yīng)用程序的根目錄，確?！按娣蓬~外文件的文件夾”不管是在開發(fā)時(shí)還是打包后都在根目錄下；
• 使用process.cwd()獲取Node.js進(jìn)程當(dāng)前的工作目錄，開發(fā)時(shí)獲取到的是項(xiàng)目根目錄，使用electron-builder打包后獲取到的是應(yīng)用程序根目錄；
• 有了根目錄的路徑，直接訪問根目錄/存放額外文件的文件夾/xxx文件就可以獲取對(duì)應(yīng)的文件：

electron-builder配置：
{
    extraFiles: ['./extra-files'],
}

electron主進(jìn)程：
function getExtraFilesPath(filename: string): string {
    return path.join(process.cwd(), `/extra-files/${filename}`);
}
let filePath = getExtraFilesPath('xxx文件名');

這樣無論是在開發(fā)中還是打包后都可以獲取到正確的文件路徑。
如果你使用的是extraResources配置項(xiàng)，也可以使用類似的辦法來獲取文件。