【WebGL連載教程三】H5開發3D引擎：TS專案建立和hello_world（新）
在上一篇，我們已經準備好了開發環境（如果你沒有，請返回檢視上一篇）。
現在我們來學習一步一步建立一個基於vscode的ts專案工程。（typeScript）
vscode和一般的ide區別在於，它不是直接在選單裡新建一個工程。
以下內容非常非常的詳細，從無到有，多圖實操，跟著一起做你也會成功~
【一】學習使用vscode來建立一個工程：
其實非常簡單，我們在任意盤下（你專案一般放在哪），建立一個資料夾。
取個名稱：TestWebGL （專案名稱不重要，或者叫 LearnWebGL ）
然後，回到vscode裡面，執行選單欄的，“檔案”>>"開啟資料夾"。
瀏覽選擇你剛剛建立的“TestWebGL”資料夾目錄。這樣它就成了你的工程目錄了。
以後，你建立或生成的所有檔案，資源，配置，都會在這個目錄下進行。
可以看到，TestWebGL目錄在vscode裡面顯示為大寫狀態。TESTWEBGL
* 由此可知，任意一個資料夾目錄，就可以指定為vscode專案的工程目錄。
【二】建立ts專案所需要的配置。
什麼是配置？主要是指 package.json 和 tsconfig.json 這兩個檔案。
* package.json 決定我們的專案名稱，程式說明，以及指令碼指令集合等。
* tsconfig.json 決定我們如何將ts檔案編譯成js，編譯引數。以及輸入輸出的路徑等。
顯然，vscode不會為我們準備好這一切，都需要我們手工去建立。
然而，建立這些配置其實也非常的簡單，只需一行命令就完事了。
（a）建立 package.json ：
在vscode中，按快捷鍵 ctrl+~。開啟終端（CMD）輸入 npm init
會顯示一些提問，比如專案名字，不用管，只需一路回車執行就好，
最後會詢問： Is this ok? (yes) 
繼續！因為後邊可以手工去修改。
就會在目錄下建立pakage.json配置模板檔案。
（b）建立 tsconfig.json ：
在vscode中，按快捷鍵 ctrl+~。開啟終端（CMD）輸入 tsc --init
一路回車，最終會生成tsconfig.json配置模板檔案。
兩個檔案已經生成了，先不用關心裡面的內容是什麼，後邊會講。
【三】建立工程所需要的目錄結構。
我們在其它專案開發的時候，經常會把原始碼，資源，庫，輸出單獨放在一個目錄下方便管理。
所以，常用的存放原始碼的目錄比如：src 。庫目錄：lib。輸出目錄：bin。
選中專案名稱，點選旁邊的”新建資料夾“按鈕圖示，依次建立這三個常用的目錄。
* 注意：點建立的時候，一定要選擇專案名稱，不然會建立到不對的層級，比如子目錄。
萬一層級錯了，不要緊。你只需要拖動它到正確位置即可。
src 目錄：存放原始碼，比如ts檔案。
lib 目錄：存放庫檔案，比如第三方js庫引用。
bin 目錄：存放編譯結果輸出。
【四】編寫第一個ts檔案：Main.ts
選中src目錄，點選”新建檔案“圖示，新建一個ts檔案，命名為：Main.ts
我們就按國際慣例，執行後在控制檯輸出一個文字：hello world
雙擊Main.ts檔案，在編寫區，輸入程式碼：console.log("hello world");
我們知道TypeScript語言是JavaScript的超集，所以我們需要將它先編譯成js才能使用。
【五】初步配置tsconfig.json
生成js的配置，在上面我們已經知曉，是在tsconfig.json中配置的。
開啟tsconfig.json是一個文字檔案，json格式顯示，有許多引數。
在預設情況下，都無需修改，我們需要關心的是，指定生成的js檔案存放目錄。
找到outDir這個選項，預設情況下是//註釋掉的，我們去掉//符號開啟它。修改成："outDir": "bin/js/",
這樣，我們剛才的Main.ts如果編譯的話，它會生成輸出到bin/js/目錄下面。
接下來，就是怎麼樣把ts編譯成js的問題了。
【六】初步配置 package.json
這個檔案掌管著一些跟專案相關的東西，比如編譯命令。
雙擊開啟package.json檔案，同樣也是一個文字json格式的內容。
{
"name": "learnwebgl",//專案名稱
"version": "1.0.0", //版本號
"description": "", //說明
"main": "", //可執行的指令碼
"scripts": { //命令
"test": "echo \"Error: no test specified\" && exit 1",
},
"author": "",//作者
"license": "ISC"
}預設情況下，是這樣的，我們可以根據自己的情況修改。
我們最關心的是scripts這個鍵中的內容，它可以指定一些命令，方便使用。
"tsc:w": "tsc -w" ——以監控模式執行TypeScript編譯器。後臺始終保持程序。
一旦TypeScript檔案變化即會重編譯
將上面這個指令，新增到scripts下。
接下來，我們嘗試編譯ts輸出為js檔案。
按ctrl+~ 開啟終端，輸入：npm tsc:w
不出意外的話，在bin/js/目錄下，會生成一個Main.js
* 小知識：手工編譯ts檔案的快捷鍵是：ctrl+shift+b。然而每次編譯都需要按這幾個鍵，太不智慧了。
好在提供了tsc -w的指令，它可以實時的監控你的任意一個ts檔案，只要內容發生了變動，就會立即編譯它。
由於我們使用的正是這個命令，所以以後只要更改了ts檔案的內容，都會自動編譯成js了，非常舒服省事。
【七】編寫html檔案呼叫生成的js檔案。
在上一節，我們生成了Main.js檔案，我們只需要在bin目錄下，建立一個index.html檔案。然後呼叫這個js就完事了。index.html的內容十分的簡單。
<script type="text/javascript" src="js/Main.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<script type="text/javascript" src="js/Main.js"></script>
</head>
<body>
<img src="" id="img"/>
<canvas id='my-canvas' width='480' height='400'>
對不起，您的瀏覽器未支援H5內容.
</canvas>
</body>
</html>
在body區域，有一個canvas標籤，這是h5的畫布，在本節中這不是必須的，在以後的章節我們會講解它。
到現在為止，我們只差一步就完成了，因為web開發是需要有一個http的web服務的。
所以我們還有最後一個任務，就是在vscode中安裝一個http web網站服務外掛。
【八】安裝web瀏覽的http服務外掛：lite-server。
按ctrl+~開啟終端，輸入：npm install -g lite-server --save-dev引數 -g 表示全域性安裝，在前面我們已經接觸過了。
引數 -save-dev 表示將會把安裝的環境寫入到pakage.json裡面。
安裝成功後，http的網站目錄預設在我們的專案下，我們需要改到bin/輸出目錄下。
我們建立一個http的配置檔案存放到configs目錄下（新建）。configs/http-config.json
{ "port":8000, "files":[""], "startPath":"./bin/index.html", "server":{"baseDir":"./"}}prot：指定web訪問的埠。
files：表明需要監視哪些檔案，一但這些檔案的內容發生變化時，會自動重新整理瀏覽器。
server：伺服器的主目錄。
startPath：指定啟動lite-server後自動開啟的主頁。
然後，我們只需要讓lite-server伺服器讀取這個配置就可以了。
同樣，按ctrl+~開啟終端，輸入：lite-server -c configs/http-config.json
http伺服器讀取配置啟動，並會開啟預設的瀏覽器。建議使用谷歌瀏覽器作為預設的瀏覽器。
以後開啟http服務只需要輸入：lite-server
* 它會一直在後臺執行，直到你在終端裡按 ctrl+c 組合鍵，就可以關閉它。 請記住！
另外，終端裡的所有程序都關聯在vscode上，當我們關閉vscode軟體後，程序都會全部關閉。
【九】使用谷歌瀏覽器除錯輸出。
在谷歌瀏覽器，按F12開啟控制檯，切換到Console選項卡中，按F5重新整理。
不出意外的話，控制檯應該輸出了：hello world
【十】寫在結尾：
其實每個步驟都十分簡單，做為入門級的教程，為了照顧新人，保證每一步都清晰易懂；
所以將每一步都用多圖的形式展現出來，導致的結果就是篇幅很長，大神們可以忽略跳過了。
裡面還有一些內容沒有完全講解，但在以後的學習過程中會詳細講解。
本節你只需要搞懂ts專案的建立到編譯，然後到除錯輸出這個流程。
其實打交道最多的是終端命令，希望好好掌握它。ctrl+~
由於是業餘時間寫作，錯誤難免會有，如有發現歡迎留言指出。
最終的 tsconfig.json 檔案內容：
最終的 package.json 檔案內容：
{ "name": "learnwebgl", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "tsc:w": "tsc-x -w", "web": "lite-server -c configs/http-config.json" }, "author": "", "license": "ISC", "dependencies": {}}在下一節，我們將學會用ts呼叫webgl畫布！
來做為進入3D程式設計的開始。