這兩天，用了一下TypeScript，剛開始遇到了一些問題，特別記錄下。

【一，下載安裝node.js】

使用node.js進行編譯開發，首先需要下載準備好node.js，從官網下載安裝即可。

開啟cmd進行驗證，輸入 npm -v 應該能看到版本號。

npm -v 

【二，命令列安裝 typescript】

然後就是安裝 typescript 。輸入命令 ： 

npm install -g typescript

其中 -g 表示安裝到全域性環境，以後在任何專案中都有效。

安裝好後，輸入以下命令，檢視已安裝的typescript版本號

tsc -v

如果官網版本升級了，咱想升級怎麼辦？

輸入 以下命令：

npm update -g typescript

【三，初始化專案目錄配置】

最後，就是下載vscode 現在最新是1.14.2。有個改進就是預設不需要task.js這個稍後再說幹嘛用的。

下載完成後，開啟軟體後，在檔案選單開啟一個目錄。

在vscode中，開啟一個目錄相當於是打開了一個工程的意思。

如果是新專案，建議的步驟是先進行初始化。

在vscode中，按快捷鍵 ctrl+~。開啟終端（CMD）輸入 npm init

會顯示一些問題，只需一路回車，就會在目錄下建立pakage.json配置。

裡面初始化只有一個name和version。先不管它。

【四，初始化typescript配置】

然後，對typescript進行初始化，執行命令：tsc --init

和上面一樣，一路回車就好，可以看到建立了一個名稱為tsconfig.json的配置檔案。

其實這個檔案自己建立也行~

至於tsconfig.json裡面內容如何寫，這個百度有很多了，這裡就不寫了，只寫過程和注意的事項。

【五，安裝http-server】

前幾項工作完成，基本環境已經搭建完畢。

我們知道寫typescript有時要用的瀏覽器進行預覽，哪我們還需要安裝一下http服務。

npm install -g http-server

這樣http服務就裝好了，萬能的npm有沒有？

如何關閉？快捷鍵：ctrl+c

更多使用方法和命令，可以輸入 http-sever -help 來檢視。

【 關於：lite-server 】

除了上面這個以外，還有另一個可推薦的是：lite-server

輕量級的僅適用於開發 的 node 伺服器， 它僅支援 web app, 它能夠為你開啟瀏覽器, 當你的html或是JavaScript檔案變化時，它會識別到並自動幫你重新整理瀏覽器, 還能使用套接字自動注入變化的CSS, 當路由沒有被找到時，它將自動後退頁面。

安裝與使用，以下是被推薦的安裝lite-server的方式:

$ npm install -g lite-server --save-dev

• 1

• 1

--save-dev 選項，將會把安裝的環境寫入到pakage.json裡面

在你的專案中的 package.json 檔案中新增一個 “script” 入口:

# Inside package.json...
  "scripts": {    
    "dev": "lite-server"
  },

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

有了上面的script 入口, 你就可以通過以下命令來啟動 lite-server 了:

$ npm run dev

lite-server 使用BrowserSync, 它是允許你去覆蓋預設的配置，這得通過你專案裡的檔案 bs-config.json 或 bs-config.js 來完成

lite-server -c configs/my-bs-config.js

舉例來說, 要改變埠號, 被監測的檔案路徑, 以及你專案的base路徑, 在你專案中建立 bs-config.json 檔案:

{
  "port": 8000,
  "files": ["./src/**/*.{html,htm,css,js}"],
  "server": { "baseDir": "./src" }
}

【六，在github下載專案】

當我們在github上下載其它人的專案，需要編譯會遇到許多麻煩。

原因是引用和配置各不相同，我們如果需要一個一個找齊，是件困難的事情。

這時候，package.json 裡面記錄了一些資訊。

執行 npm install 會匹配並下載安裝需要的環境。

當然前提是需要別人這個配置完整且正確。

【七，使用git】

預設的vscode支援對git命令的呼叫，但它沒有安裝git程式，需要我們來單獨進行安裝。

到git的官網上下載 Git-2.13.3-64-bit.exe 安裝後即可。

【八，使用grunt 】

在開發中，推薦使用 grunt 會幫你解決很多問題，要介紹這個grunt使用涉及的篇幅很大。

而且百度也能找到許多優秀的介紹，建議大家搜尋自行了解。

【九，如何同時執行兩條npm命令】

使用 concurrently 即可。
需要安裝 concurrently 

npm install -g concurrently

package.json的 scripts:

"command1":"aaaaa",
"command2":"bbbbb",
"test":"concurrently \"npm run command1\" \"npm run command2\""

然後 npm test就可以同時監聽 aaaaa 和 bbbbb 了.

【 十，關於 --save 和 --save-dev 的區別】

--save是對生產環境所需依賴的宣告(開發應用中使用的框架，庫),

--save-dev是對開發環境所需依賴的宣告(構建工具，測試工具).

正常使用npm install時，會下載dependencies和devDependencies中的模組，

當使用npm install --production或者註明NODE_ENV變數值為production時，只會下載dependencies中的模組。

這篇寫了簡要的記錄，希望對大家有幫助！