# 項目結構
當涉及制作 electron 應用程序的問題時,項目結構會有些不同。如果你以前使用過官方的 [`vuejs-templates/webpack`](https://github.com/vuejs-templates/webpac) 設置,那么你對這個結構應該很熟悉。本文檔在此章節將嘗試解釋樣板代碼的工作原理以及應用程序在構建中的一些區別。
### 單一的 `package.json` 設置
就在不久之前,兩個 `package.json` 的設置是必需的,但是,感謝 [@electron-userland](https://github.com/electron-userland) 的努力,[`electron-packager`](https://github.com/electron-userland/electron-packager) 和 [`electron-builder`](https://github.com/electron-userland/electron-builder) 現在完全支持單一的 `package.json` 設置。
#### `dependencies`
這些依賴項 **將會被** 包含在你最終產品的應用程序中。所以,如果你的應用程序需要某個模塊才能運行,那么請在此安裝!
#### `devDependencies`
這些依賴項 **不會被** 包含在你最終產品的應用程序中。在這里,你可以安裝專門用于開發的模塊,如構建腳本、`webpack` 加載器等等。
#### 安裝原生 NPM 模塊
我們需要確保我們本地的 npm 模塊是針對 electron 來構建的。為了做到這一點,我們可以使用 [`electron-rebuild`](https://github.com/electron/electron-rebuild),但是為了使事情變得更簡單,我們強烈建議使用 [`electron-builder`](https://github.com/electron-userland/electron-builder) 作為你的構建工具,因為它會為你處理很多任務。
### 關于 `main` 進程
在開發過程中,你可能會注意到 `src/main/index.dev.js`。該文件專門用于開發以及安裝開發工具。原則上,該文件不應該被修改,但是可以被用來擴展你的開發需求。在構建的過程中,`webpack` 將介入其中并創建一個的捆綁,以 `src/main/index.js` 作為該捆綁的入口文件。