Dev-Felix: 建立 TypeScript 開發環境

使用地表最強的 IDE Visual Studio 開發 TypeScript 不是件難事，尤其是 VS2015 以後已內建 TypeScript 環境，想要開發相關程式碼，只要打開 VS 直接編輯儲存即可。不過 VS 畢竟是開發大型專案的開發工具，若只是單純想要寫些 TypeScript 檔案，免費且跨平台的編輯工具，像 Sublime 及微軟的 Visual Studio Code，便是個好選擇。

若選用 Sublime, VS Code 等工具開發前端相關程式，編譯的環境除了現有套件外，就得要自己一步步的建立了。我自己依照參考的書籍及網路上的分享文嘗試，可說是百試百敗，不過試到最後，還是建立成功了，因此以下就是個紀錄文。未來環境重建時，至少還有個 Step by Step 可看。

建立前的前置作業：

1. 由於使用

npm

安裝套件，務必安裝 Node.js，並將路徑設到系統環境路徑裡
2. 簡單的編輯工具

Step.1 套件管理設定

建立專案的目錄，並於命令中執行
```
npm init
```
初始化 Node.js 管理工具。此時將會要求建立一些專案的屬性內容，隨便填填就好。若不想填專案屬性內容，指令改下：
```
npm init -y
```
安裝 TypeScript：
```
npm install typescript -g
```
將 TypeScript 設為「運行時相依」(使用 -save):
```
npm install typescript --save
```
安裝任務管理工具 Gulp:
```
npm install gulp -g
```
於 node.js 初始化所建立的 package.json 中將 gulp 設為「運行時相依」:
```
npm install gulp --save
```
，此時的設定檔大致如下:
安裝編譯 TypeScript 程式碼的套件工具 gulp-typescript:
```
npm install gulp-typescript --save-dev
```

Step.2 設定 TypeScript Definitions (Types)

安裝全域性用於管理 TypeScript 中描述文件的工具 tsd (TypeScript Definitions):
```
npm install tsd -g
```
安裝完成後，執行
```
tsd init
```
以初始化，並會自動在專案根目錄中建立「typings」資料夾，裡面放置了許多描述文件。
TypeScript 1.5 以後版本支援自訂編譯設定檔，因此可在設定檔中針對不同的情況下設定不同的編譯條件 (詳細內容)。接著專案根目錄中建立 tsconfig.json 檔案，並填入以下內容：
```
{
  "compilerOptions": {
  "target": "es5",
  "sourceMap": true
  }
}
```
於根目錄中建立 app (放置 .ts 檔案) 及 js (放置編譯後的 .js 檔案) 資料夾

Step.3 設定 Gulp ->快要完成了!

該裝的都裝完後，接著要設定最重要的 gulp 了。我們可在 gulp 中設定許多任務 (如: 編譯 scss/sass …等)，並可隨時監視檔案的變化，一有儲存即可自動進行編譯。

首先，於專案根目錄中建立 gulpfile.js 檔案，並寫入以下內容:

var gulp = require('gulp'),
    tsc = require('gulp-typescript'),
    tsProject = tsc.createProject('tsconfig.json');

    // path variables for files 
    var tsSource = './app/**/*.ts';
    var tsTypings = './typings/**/*.ts';
    var tsOutPath = './js/';

    // Main task responsible for compiling typescript files
    gulp.task('compile-ts', function() {

    var tsResult = gulp.src([tsSource, tsTypings])
        .pipe(tsc(tsProject));

    tsResult.dts.pipe(gulp.dest(tsOutPath));
    return tsResult.js.pipe(gulp.dest(tsOutPath));
});

    // responsible for watching ts files to auto compile
    gulp.task('watch', function() {
    gulp.watch(tsSource, ['compile-ts']);
});

//default task which runs when you call gulp
gulp.task('default', ['compile-ts', 'watch']);

最後執行 gulp 指令啟動任務
之後存放於 app 資料夾內的 .ts 檔案，一經儲存且編譯無誤狀況下，就會自動編譯並於 js 資料夾內產生相對應的 .js 檔了。

Node.js 指令補充

npm i -g typescript typings gulp

等同於

npm install -g typescript typings gulp

，

-i

install

-g

: 全域性安裝意思

```
npm i -D gulp
```
，
```
i -D
```
=
```
install --save-dev
```
(縮寫)
```
--save
```
會把相依套件名稱添加到 package.json 文件 dependencies 下，
```
--save-dev
```
則添加到 package.json 文件
```
devDependencies
```
下。dependencies 生產環境中需要的相依；devDependencies 為開發測試時所使用的相依，並不會實際部屬到正式環境中。

Dev-Felix

2017/02/14

建立 TypeScript 開發環境

建立前的前置作業：

Step.1 套件管理設定

Step.2 設定 TypeScript Definitions (Types)

Step.3 設定 Gulp ->快要完成了!

Node.js 指令補充

參考來源

沒有留言 :

張貼留言