[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專案,則使用下列指令,然後依序出現相關項目來讓我們填寫
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”
}
}

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
編譯ts文件的方法如下
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
}
}
這個手冊有更詳細的解說每一個設定的意義:TypeScript配置文件tsconfig简析

Gulp

安裝完node.js後,就是使用 windows 的 cmd 或 Mac 的 Termial 來安裝 Gulp,首先我們先輸入以下的指令,把 Gulp 安裝好,並且設定是只有在開發時期會使用到。
首先要先將gulp安裝到全域領域,這樣我們才能使用cmd等去呼叫gulp執行工作(若mac環境前面要加sudo)
npm install -g gulp
然後在剛剛設定好的專案裡,設定我們的專案要使用到gulp模組。至於為什麼要有-save-dev呢?當我們寫-save-dev,會將這個模組添加到package.json的devDependencies裏頭,如果寫-save,就會添加到dependencies裡,這兩個的差異在於讓使用具備這個package.json專案的人,可以清楚的知道這個模組,是開發使用,還是執行專案時使用的。
npm install gulp –save-dev
因為我們是使用typescript,因此也要安裝gulp-typescript
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"
        }
    });
});

GitHub

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

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

參考資料


17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。