首先,你需要先裝好nodejs,且能使用npm

只要在cmd內輸入: npm -v 有顯示版本號就表示有成功啦~

( 因為npm是global的所以在哪裡都可以下指令 )

然後呢先介紹一下npm一些常用的指令:

[安裝套件] npm install xxx
[安裝套件且寫入Package.json]
--save-dev: Package will appear in your devDependencies
--save: Package will appear in your dependencies

[安裝全域套件] npm install xxx -g  會安裝到C:\Users\[Username]\AppData\Roaming\npm
[安裝package.json套件] npm install

[解除安裝套件] npm uninstall xxx
[解除安裝全域套件] npm uninstall xxx -g

[列出套件] npm ls
[列出套件詳細資訊] npm ls -l
[列出全域套件] npm ls -g
[列出全域套件詳細資訊] npm ls -gl

[更新套件] npm update
[更新全域套件] npm update -g

再來我們就挑一個資料夾當作我們的專案資料夾

1. npm 初始化

首先我們需要先初始化資料夾,用意只是為了幫你建一個package.json,這樣就不用自己手刻了

指令: npm init -y  ( -y是默認產生package.json )

2. npm 安裝 electron

Electron在v1.3.1 以前都是需要安裝electron-prebuilt,之後的版本改為安裝electron

指令: npm install electron --save--dev

3. 建立 electron 執行入口的 JS

這時候我們先建立一個 main.js,用意是要讓electron去執行這個JS,我們會在裡面做一些初始化的動作

BrowserWindow就是一個視窗,要有畫面首先我們要先new一個BrowserWindow

裡面會指定這個BrowserWindow要載入的html

4. 執行electron

這個部份我們可以利用npm的scripts的功能,下面是我package.json的部分內容

"scripts": {
    "start": "electron ./src/main.js",
    "testla": "npm -v"
  },

scripts的意思就是腳本

你可以透過scripts去自定義腳本,省去每次都要打一堆指令的時間

以上面的例子來說,start內的腳本為透過electron來執行./src/main.js這支JS

testla則是透過npm -v來確認npm版本

這時候我們只要在專案資料夾內使用npm run 腳本名稱,就可以使用啦~

腳本參考

 

 


arrow
arrow
    文章標籤
    electron nodejs babel webpack
    全站熱搜

    cookiesp 發表在 痞客邦 留言(0) 人氣()