詳細(xì)步驟

下面的內(nèi)容適合新手，包含詳細(xì)步驟和注意事項(xiàng)。

1. 安裝 Nodejs 和 npm

訪問(wèn) Nodejs 官網(wǎng)下載并安裝 nodejs，選擇一個(gè)適合你的操作系統(tǒng)的安裝包，按照官方提示安裝即可。雖然不同的 nodejs 版本都可以運(yùn)行喧喧，但可能需要額外的配置，建議你下載與喧喧開(kāi)發(fā)者相同版本的 nodejs 版本。喧喧開(kāi)發(fā)人員目前使用的 nodejs 環(huán)境版本是  8.11.3，可以在這個(gè)頁(yè)面  https://nodejs.org/zh-cn/download/releases/ 找到對(duì)應(yīng)版本的下載地址。

Windows 和 Mac 系統(tǒng)用戶可以直接下載非常方便的一鍵安裝包，安裝完成后打開(kāi)命令行窗口（Mac 下為應(yīng)用 “終端”，Windows 下為程序 “命令提示符” 或 “PowerShell”）輸入如下命令查詢安裝后的版本號(hào)，如果輸出正確版本號(hào)說(shuō)明安裝成功。

$ node -v

輸出：

v8.11.3

如果 nodejs 安裝成功，npm 也會(huì)一起安裝完成，輸入npm -v來(lái)檢查已安裝的 npm 版本。

$ npm -v

輸出：

5.6.0

2. 下載喧喧源碼

如果你的系統(tǒng)安裝有 git，只需要在命令行執(zhí)行如下命令來(lái)下載最新版的喧喧源碼：

$ git clone https://github.com/easysoft/xuanxuan.git

下載完成后就會(huì)在你的系統(tǒng)創(chuàng)建一個(gè)名稱(chēng)為xuanxuan的目錄，該目錄內(nèi)就是喧喧最新的源碼，其中客戶端源碼在xxc目錄，以下所有操作都是在xxc目錄下進(jìn)行。

$ cd xuanxuan/xxc

如果你還沒(méi)有安裝或使用過(guò)  git 也不用擔(dān)心，你仍然可以訪問(wèn)  喧喧在 Github 上的頁(yè)面，直接點(diǎn)擊  “Download ZIP” 來(lái)下載源碼。下載完成后將 zip 文件解壓到xuanxuan目錄下即可。

3. 安裝項(xiàng)目依賴(lài)

從命令行進(jìn)入下載好的喧喧源碼目錄（以下默認(rèn)為xuanxuan/），執(zhí)行如下命令：

$ npm install

安裝失敗？

此步驟通常需要幾分鐘，視網(wǎng)絡(luò)環(huán)境執(zhí)行的時(shí)間不定。如果你使用的是國(guó)內(nèi)網(wǎng)絡(luò)，可能導(dǎo)致某些依賴(lài)模塊安裝失敗。下面介紹使用國(guó)內(nèi) 淘寶 NPM 鏡像 來(lái)加速安裝過(guò)程，確保安裝成功。以下經(jīng)驗(yàn)適合任何基于 nodejs 的項(xiàng)目。

將鏡像地址寫(xiě)入~/.npmrc

在你的系統(tǒng)找到~/.npmrc文件，并用文本編輯器打開(kāi)，寫(xiě)入如下內(nèi)容到文件：

registry=https://registry.npm.taobao.org/
disturl=https://npm.taobao.org/dist

注意：.npmrc文件在系統(tǒng)的個(gè)人文件目錄下，在不同的操作系統(tǒng)上對(duì)應(yīng)的路徑不同，Windows 用戶通常次文件在C:/Users/UserName/.npmrc，Mac 用戶通常此文件在/Users/UserName/.npmrc。

寫(xiě)好配置后可以使用npm info命令檢查下是否生效，以下為查看  ZUI 為例：

$ npm info zui

如果在命令行輸出信息的結(jié)尾找到 ZUI 的下載地址為registry.npm.taobao.com，說(shuō)明配置生效了。

dist:{ 
    shasum: '134f986bc53a62be2310a0438918b8a17b58c80c',
    size: 9957159,
    noattachment: false,
    tarball: '**http://registry.npm.taobao.org/zui/download/zui-1.6.0.tgz**' },
    publish_time: 1489730305654 
}

這樣再次執(zhí)行npm install命令就可以使用國(guó)內(nèi)的淘寶鏡像進(jìn)行依賴(lài)模塊的安裝了。

安裝 Electron 失敗？

設(shè)置 ELECTRON_MIRROR 環(huán)境變量

設(shè)置 Electron 環(huán)境變量，在 Mac 或 Linux 下執(zhí)行：

$ export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"

Windows 用戶需要打開(kāi)系統(tǒng)屬性面板來(lái)設(shè)置環(huán)境變量（變量名稱(chēng)為ELECTRON_MIRROR，值為https://npm.taobao.org/mirrors/electron/）。

做了如上設(shè)置后，請(qǐng)重新執(zhí)行npm install。Windows 用戶注意，設(shè)置新的環(huán)境變量之后需要重新打開(kāi)一個(gè)命令行窗口，所設(shè)置的環(huán)境變量才會(huì)生效。

單獨(dú)安裝 Electron

如果仍然遇到問(wèn)題，你可以嘗試單獨(dú)先安裝 Electron，Mac 或 Linux 用戶執(zhí)行：

ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" npm install electron

Windows 用戶無(wú)法運(yùn)行上面的命令，仍然

$ npm install cross-env -g

然后再執(zhí)行：

cross-env ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" npm install electron

這樣就可以強(qiáng)制從淘寶鏡像安裝 Electron。

其他資源

如果你還有其他問(wèn)題，請(qǐng)參考如下內(nèi)容：

• npm taobao 鏡像官方網(wǎng)站；
• 加速electron在國(guó)內(nèi)的下載速度；
• 使用淘寶 NodeJS 鏡像加速 Electron Node-Sass 的安裝速度；
• 安裝node和npm并切換淘寶npm鏡像源。

4. 啟動(dòng)開(kāi)發(fā)服務(wù)器

如果你最后一次執(zhí)行npm install沒(méi)有出現(xiàn)任何錯(cuò)誤，就可以啟動(dòng)開(kāi)發(fā)服務(wù)器了。

啟動(dòng) React 熱更新服務(wù)器

在命令行窗口執(zhí)行如下命令：

$ npm run hot-server

如果你在命令行窗口看到如下內(nèi)容，說(shuō)明 React 熱更新服務(wù)器成功啟動(dòng)：

熱更新服務(wù)器用于監(jiān)聽(tīng)源碼文件更改，當(dāng)你更改了源碼之后會(huì)立即重新編譯并通知界面組件進(jìn)行刷新。這是一種所見(jiàn)即得的開(kāi)發(fā)模式，也就是說(shuō)你在源代碼中的更改會(huì)即時(shí)反饋到界面上來(lái)。

注意：只有 React 組件模塊會(huì)直接中界面上更新，如果是其他模塊雖然仍然會(huì)實(shí)時(shí)編譯，但并不會(huì)進(jìn)行實(shí)時(shí)更換，此時(shí)你可以在界面上按頁(yè)面刷新快捷鍵（Windows 為F5，Mac 用戶為Command+R）來(lái)重新載入界面。

啟動(dòng)客戶端

打開(kāi)一個(gè)新的命令行窗口（不要關(guān)閉之前打開(kāi)的正在運(yùn)行的熱更新服務(wù)器命令行窗口）執(zhí)行：

$ npm run start-hot

如果你在命令行窗口看到如下內(nèi)容，說(shuō)明客戶端啟動(dòng)成功：

首次啟動(dòng)時(shí)間過(guò)長(zhǎng)

當(dāng)首次執(zhí)行npm run start-hot時(shí)，Electron 會(huì)嘗試下載安裝REACT_DEVELOPER_TOOLS方便進(jìn)行 React 開(kāi)發(fā)調(diào)試，此時(shí)命令行會(huì)顯示Install electron development extensions...。正常情況下只需要幾分鐘，但在網(wǎng)絡(luò)不佳的話可能導(dǎo)致首次啟動(dòng)時(shí)間過(guò)長(zhǎng)。如果超過(guò)5分鐘主界面還沒(méi)啟動(dòng)，可以嘗試禁用自動(dòng)安裝 Electron 擴(kuò)展，方法是使用npm run start-hot-fast代替npm run start-hot命令。

恭喜

通常情況下，如果以上步驟都成功，此時(shí)會(huì)在你的屏幕左側(cè)打開(kāi)一個(gè)新的窗口：窗口上方是喧喧的界面，下方是 Chrome 的開(kāi)發(fā)者工具。