随時随地一句代碼開啟一個支援熱更新的HTTP開發伺服器

    前端入門很簡單，一個 .html 檔案就可以運作，但是這種基于本地檔案打開的 html檔案并不是運作在http伺服器的，有時候進行開發或者測試一些什麼代碼需要一個http伺服器，例如需要cookie功能，使用ajax讀取檔案等。

    今天筆者分享一個無需任何配置、随時随地一行代碼開啟一個能夠熱更新的HTTP開發伺服器的方法，雖然網上有很多教程。但是可能配置和指令比較麻煩，對新手來說不太友好。

    正文開始，首先要安裝nodejs，這個很簡單就跟安裝微信、QQ一樣，點選這裡根據你的作業系統選擇下載下傳安裝包安裝node。

    然後在任意目錄打開指令行，輸入以下指令按回車安裝一個腳手架工具，因為内置了一個http伺服器，是以下載下傳可能會耗費一點時間，請耐心等候。

npm install jet-js-cli -g
           

    隻需要下載下傳好這個了之後，所有工作都完成了，在任意目錄打開指令行，輸入以下指令按回車就可以開啟一個支援熱更新的HTTP開發伺服器，預設入口是index.html檔案。使用起來非常簡單。不過需要注意的是，如果要想正常使用熱更新，請保證目前完整目錄中不包含漢字。

jet run
           

    前面都是鋪墊，抛磚引玉一下，介紹一下這個 jet-js-cli 是個什麼東西，這是一款輕量級漸進式的MVVM架構Jet.js的腳手架工具，使用它你可以快速建立一個Jet項目，jet run 指令隻是其中的一個功能。

     jet-js-cli 還有 jet init 指令和 jet build 指令。

以下是詳細介紹和使用：

jet-js-cli

theajack

Jet.js 的腳手架工具，幫助您更便捷地使用Jet

Jet 是一個輕量級、漸進式的 JS MVVM架構

1.Installation

1.Use npm to install

npm install jet-js-cli -g
           

下載下傳需要一點時間，請耐心等候

（請使用 

-g

 全局安裝，否則後續指令無法執行）

2.Use

選擇一個您希望建立項目的目錄，指令行運作以下指令：

jet init projectName
           

3.Development

執行上述指令後會下載下傳一個Jet的開發模闆和相應開發環境，執行以下指令可以運作這個Jet示例程式：

cd projectName
jet run
           

詳細Jet使用教程請參考 Jet API

4.1 Packing Command

使用以下指令打包項目

jet build
           

打包完成後，會在根目錄下生成一個

build

檔案夾（如已有

build

檔案夾，會将舊的打封包件覆寫），将build檔案夾中的所有檔案複制到您的生産環境中即可運作。

生成

build

檔案夾後，可以使用一下指令測試打包之後的項目能否正常工作。

cd build
jet run
           

實際上，您可以使用

jet run

指令在任一目錄下啟動一個http伺服器，入口檔案是

index.html

4.2 Packing configuration

在根目錄中的

build.config.json

檔案中，有以下配置項

...
"jetConfig": {
	"compressHtml": true,
	"compressCss": true,
	"compressJs": true,
	"buildJsWithBabel": false,
	"buildCssWithLess": false,
	"commonLess": false
},
...
           

各項參數含義如下

參數	預設值	描述
compressHtml	true	是否壓縮html檔案
compressCss	true	是否壓縮css檔案
compressJs	true	是否壓縮js檔案
buildJsWithBabel	false	是否将es6轉為es5
buildCssWithLess	false	是否将less轉為css
commonLess	false	是否将common.css 作為less轉譯

-備注：若您使用es6開發，雖然支援配置 buildJsWithBabel 後在生産環境中轉es5。但在開發環境中，請使用es6相容性較好的浏覽器，例如高版本的Chrome。因為在開發環境中，Jet并沒有對es6轉es5

.