[3 – 環境設定] 開發環境介紹

VS Code

Visual Studio Code（簡稱VS Code）是一個由微軟開發的IDE，它最大的優點就是它是完全免費且Open Source的。它支援偵錯，並內建了Git版本控制功能，同時也具有開發環境功能。我個人覺得他在算是滿方便好用的，自動提示、自動補完和顏色選擇功能都很強大。

這邊是下載連結：Download Visual Studio Code

NPM

NPM 是 Node Package Manager 的簡稱，它是一個線上套件庫，可以下載各式各樣的 Javascript 套件來使用。

過去如果我們想要使用jQuery，就會需要去下載一個JQuery的Library檔案放進專案目錄裡。但是當這樣的Library庫檔案越來越大，而且越來越多時，就會較難管理，也會造成svn或git等版本管理系統要多去管控一些根本不屬於這個專案的程式碼，Library之間的版本管理也會較為困難。另外很多元件庫或許只需要在開發時期用到，在部署時不需要用到。這些都會讓套件的管理增加複雜度。因此現在大多數的前端工程師都會使用npm來做套件管理的工具，能夠解決上述的那些問題。

安裝npm要先去安裝Node.js。Node.js 在 0.6.3 版本開始內建 npm，讀者安裝的版本若是此版本或更新的版本，就可以略過以下安裝說明。

若要檢查 npm 是否正確安裝，可以使用以下的指令：

npm -v

npm -v

要初始化一個npm專案，則使用下列指令，然後依序出現相關項目來讓我們填寫

npm init

npm init

按下enter後就會在資料夾目錄裡面看到資料夾內增加了一個名為package.json的檔案，這個檔案會紀錄這個專案的許多相關資訊。

下面為一個簡單的package.json的範例

{
  "name": "lianliankan"//專案名稱,
  "version": "0.0.1",//版本號
  "scripts": {//撰寫一些要跑專案要用的指令在這邊，例如這個範例可以用npm lunch去跑gulp launch-web這個指令
    "launch": "gulp launch-web" 
  },
  "license": "ISC",
  "dependencies": {//套件管理，這個專案需要用到那些套件在這邊設定
    "browser-sync": "^2.24.7",
    "gulp": "^3.9.1",
    "gulp-typescript": "^5.0.0-alpha.3"
  }
}

{

"name": "lianliankan"//專案名稱,

"version": "0.0.1",//版本號

"scripts": {//撰寫一些要跑專案要用的指令在這邊，例如這個範例可以用npm lunch去跑gulp launch-web這個指令

"launch": "gulp launch-web"

"license": "ISC",

"dependencies": {//套件管理，這個專案需要用到那些套件在這邊設定

"browser-sync": "^2.24.7",

"gulp": "^3.9.1",

"gulp-typescript": "^5.0.0-alpha.3"

}

TypeScript

TypeScript是一種由微軟開發的自由和開源的程式語言。它是JavaScript的一個嚴格超集，並添加了靜態型別和類別基礎的物件導向特性。TypeScript是由C#的首席架構師以及Delphi和Turbo Pascal的創始人安德斯·海爾斯伯格參與了TypeScript的開發。

TypeScript設計目標是開發大型應用，然後轉譯成JavaScript。由於TypeScript是JavaScript的嚴格超集，任何現有的JavaScript程式都是合法的。TypeScript程式物件導向的特性能讓我們在寫TypeScript的時候，有像是寫強型別的語言一樣輕鬆自在，IDE 也可以幫你檢查基本的錯誤。在將TypeScript編譯成JS時，也可以設定是要轉成那種版本的JS，如：EC5、EC6。避免在寫程式還要去注意不同版本JS的兼容性。

安裝TypeScript的命令行工具安裝方法如下：

npm install -g typescript

1	npm install -g typescript

編譯ts文件的方法如下

tsc hello.ts

1	tsc hello.ts

但是當我們在開發一個較大型的專案時，一般我們不可能一個一個檔案用上面的指令去complier，這時候我們會設定一個typescript的config檔案：tsconfig.json
這邊是關於這個config的設定教學：tsconfig.json

下面是一個tsconfig.json的簡單範例，compilerOptions用來設定如何來編譯ts文件

{
    "files": [
        "src/*.ts"//要complier那些ts檔案
    ],
    "compilerOptions": {
        "target": "es5",//要complier成的js版本
        "module": "system",//module用於指定模塊的代碼生成規則，可以使用commonjs，amd，umd，system，es6，es2015，none這些選項。
        //選擇commonJS，會生成符合commonjs規範的文件，使用amd，會生成滿足amd規範的文件，
        //使用system会生成使用ES6的system.import的代码。使用es6或者是es2015會產生包含ES6特性的代碼。
        "moduleResolution": "node",
        "sourceMap": false,//sourceMap是當我們使用chrome dev tools時，當有錯誤是否我們能夠直接在js連回ts檔案格式去偵錯
        //通常只會在dev環境開啟（為方便偵錯），不然會讓產出的檔案變大
        "removeComments": true,//設置為true代表不輸出注解
        "noImplicitAny": false,//是否在型別設定為any時發出警告
        "rootDir": "src/",//根目錄
        "lib": [ "es6", "dom" ],
        "allowSyntheticDefaultImports": true
    }
}

{

"files": [

"src/*.ts"//要complier那些ts檔案

"compilerOptions": {

"target": "es5",//要complier成的js版本

"module": "system",//module用於指定模塊的代碼生成規則，可以使用commonjs，amd，umd，system，es6，es2015，none這些選項。

//選擇commonJS，會生成符合commonjs規範的文件，使用amd，會生成滿足amd規範的文件，

//使用system会生成使用ES6的system.import的代码。使用es6或者是es2015會產生包含ES6特性的代碼。

"moduleResolution": "node",

"sourceMap": false,//sourceMap是當我們使用chrome dev tools時，當有錯誤是否我們能夠直接在js連回ts檔案格式去偵錯

//通常只會在dev環境開啟（為方便偵錯），不然會讓產出的檔案變大

"removeComments": true,//設置為true代表不輸出注解

"noImplicitAny": false,//是否在型別設定為any時發出警告

"rootDir": "src/",//根目錄

"lib": [ "es6", "dom" ],

"allowSyntheticDefaultImports": true

}

這個手冊有更詳細的解說每一個設定的意義：TypeScript配置文件tsconfig简析

Gulp

安裝完node.js後，就是使用 windows 的 cmd 或 Mac 的 Termial 來安裝 Gulp，首先我們先輸入以下的指令，把 Gulp 安裝好，並且設定是只有在開發時期會使用到。
首先要先將gulp安裝到全域領域，這樣我們才能使用cmd等去呼叫gulp執行工作(若mac環境前面要加sudo)

npm install -g gulp

1	npm install -g gulp

然後在剛剛設定好的專案裡，設定我們的專案要使用到gulp模組。至於為什麼要有-save-dev呢？當我們寫-save-dev，會將這個模組添加到package.json的devDependencies裏頭，如果寫-save，就會添加到dependencies裡，這兩個的差異在於讓使用具備這個package.json專案的人，可以清楚的知道這個模組，是開發使用，還是執行專案時使用的。

npm install gulp --save-dev

1	npm install gulp --save-dev

因為我們是使用typescript，因此也要安裝gulp-typescript

npm install gulp-typescript --save-dev

1	npm install gulp-typescript --save-dev

下面是我們所設定的gulpfile.js，這個檔案主要是要設定我們部署時要做的動作。
例如下面的範例可以在呼叫gulp default時自動做下面的幾個步驟

編譯ts檔案
copy相關資源/li>
bundle
使用browserSync來開啟並同步更新網頁

var gulp = require("gulp");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");
var browserSync = require('browser-sync');

gulp.task("copy-html", function () {
    return gulp.src(['src/*.html','src/libs/*'])
        .pipe(gulp.dest('build'));
});

gulp.task("build", ["copy-html"], function () {
    browserify({
        basedir: '.',
        debug: true,
        entries: ['src/main.ts'],
        cache: {},
        packageCache: {}
    })
    .plugin(tsify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest("build"));
});

gulp.task('default',['server'], function() {
    gulp.watch(["src/**/*"], ['build']);
});

gulp.task('server', ['build'], function () {
    browserSync({
        open: true,
        port: 8001,
        files: ["build/**/*.{html,htm,css,js,json}"],
        server: {
            "baseDir": "./build"
        }
    });
});

var gulp = require("gulp");

var browserify = require("browserify");

var source = require('vinyl-source-stream');

var tsify = require("tsify");

var browserSync = require('browser-sync');

gulp.task("copy-html", function () {

return gulp.src(['src/*.html','src/libs/*'])

.pipe(gulp.dest('build'));

});

gulp.task("build", ["copy-html"], function () {

browserify({

basedir: '.',

debug: true,

entries: ['src/main.ts'],

cache: {},

packageCache: {}

})

.plugin(tsify)

.bundle()

.pipe(source('bundle.js'))

.pipe(gulp.dest("build"));

});

gulp.task('default',['server'], function() {

gulp.watch(["src/**/*"], ['build']);

});

gulp.task('server', ['build'], function () {

browserSync({

open: true,

port: 8001,

files: ["build/**/*.{html,htm,css,js,json}"],

server: {

"baseDir": "./build"

}

});

GitHub

這一個專案的所有程式碼我都會放在這個gitHub儲存庫：https://github.com/cochiachang/ironman2018

因為Git使用主題太大了，所以不熟悉的讀者可參考此文：30 天精通 Git 版本控管

Claire's Blog

[3 – 環境設定] 開發環境介紹

VS Code

NPM

TypeScript

Gulp

GitHub

參考資料

發佈留言