深入淺出TypeScript（2）- 用TypeScript建立web專案
前言
在第一篇中，我們簡單介紹了TypeScript的一些簡單語法，那麼如果我們只是簡單使用TypeScript開發一個web專案，應該做哪些準備？接下來我們就結合TypeScript和Webpack來建立一個基於TypeScript的Web應用程式。
準備工作
為了建立第一個Web應用，我們先做一些基本的準備工作，需要安裝以下依賴：
webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin clean-webpack-plugin typescript ts-loader jest & @types/jest
建立專案
新建資料夾ts-init，npm init -y初始化package.json檔案。
之後，我們依次安裝上述依賴到專案中，以下是安裝之後的package.json檔案：
{
"name": "ts-init",
"version": "1.0.0",
"description": "",
"main": "./src/index.ts", // 設定入口檔案
"scripts": {
"start": "webpack-dev-server --mode=development --config ./build/webpack.config.js", //設定啟動命令
"build": "webpack --mode=production --config ./build/webpack.config.js", // 配置build命令
"test": "jest"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/jest": "^24.0.18",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.9.0",
"ts-jest": "^24.0.2",
"ts-loader": "^6.0.4",
"typescript": "^3.5.3",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0",
"webpack-merge": "^4.2.1"
}
}
接下來我們按照package.json建立src和build目錄，目錄結構如下：
讓我們引入來建立webpack檔案，我們建立在build目錄下面。
為了保證我們可以按照develop和production方式來編譯，我們建立了四個個webpack檔案，如下所示
其中，主配置檔案為webpack.config.js：
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')
// const config = process.env.NODE_ENV === 'development' ? devConfig : proConfig
module.exports = (env, argv) => {
let config = argv.mode === 'development' ? devConfig : proConfig; // 通過不同的環境，我們執行不同的webpack檔案
return merge(baseConfig, config);
};
提取的基礎配置為webpack.base.config.js：
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
'app': './src/index.ts' // 入口檔案
},
output: {
filename: '[name].[chunkhash:8].js' // 編譯的檔案以名字.hash值結尾
},
resolve: {
extensions: ['.js', '.ts', '.tsx']
},
module: {
rules: [
{
test: /\.tsx?$/i,
use: [{
loader: 'ts-loader'
}],
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html' // 啟動HTML檔案
})
],
optimization: { // 簡單拆包
splitChunks: {
chunks: 'all'
}
}
}
開發環境配置為webpack.dev.config.js：
module.exports = {
devtool: 'cheap-module-eval-source-map' // 開發環境我們只新增 忽略列資訊的ts原始碼的sourcemap
}
生產環境配置為webpack.pro.config.js：
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin() // 生產環境我們只先新增build清除檔案，用來清除每次build產生的hash檔案，避免因為無用檔案導致打包過大
]
}
接下來，我們在src資料夾下編寫HTML檔案模板，我們建立一個div用來承載單頁應用的內容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TypeScript</title>
</head>
<body>
<div class="app"></div>
</body>
</html>
我們src資料夾下面簡單編寫一個index.ts檔案，寫入hello world程式
let str: string = 'Hello TypeScript'
document.querySelectorAll('.app')[0].innerHTML = str
ok，一切工作都已經準備完畢，一個ts編寫的web程式基本專案已經被我們建立
執行
在命令列我們輸入：npm start命令,程式預設執行路徑為：http://localhost:8080/，我們在自己瀏覽器開啟網址，發現我們的程式執行成功了：
新增Jest單元測試
現在為我們的專案新增簡單的單元測試。
我們首先在src模組下面建立一個普通的模組math.ts,裡面包括加法和減法兩個方法，我們將會對這兩個方法做簡單的單元測試：
function add(a: number, b: number) {
return a + b;
}
function sub(a: number, b: number) {
return a - b;
}
module.exports = {
add,
sub
}
接下來我們在test資料夾下建立測試檔案math.test.ts：
const math = require('../src/math');
test('add: 1 + 1 = 2', () => {
expect(math.add(1, 1)).toBe(2);
})
test('sub: 10 - 1 = 9', () => {
expect(math.sub(10, 1)).toBe(8);
})
我們執行test命令：npm test，執行結果如下：
由上報錯可知，我們test檔案寫錯了，10 -1我們寫成了希望=8，我們修改一下test檔案：
const math = require('../src/math');
test('add: 1 + 1 = 2', () => {
expect(math.add(1, 1)).toBe(2);
})
test('sub: 10 - 1 = 9', () => {
expect(math.sub(10, 1)).toBe(9); // 修改成9
})
繼續執行npm test：
由上可知，我們測試通過了。
到此為止，我們的一個簡單地可用TypeScript專案開發的Web程式就建立完畢了。
結尾
TypeScript應用非常簡單，我們只需要做簡單的配置，就可以讓專案執行起來，TypeScript的型別系統會幫助我們做型別檢查，減少我們的邊界值錯誤機率，可以大大增強我們的開發體驗。
同時，TypeScript的測試也很簡單，用Jest我們可以做到對專案的單元測試，使我們的程式碼更可靠和更安全。
簡單的專案已經被我上傳至github：https://github.com/qixingduanyan/ts-web
我的部落格地址：http://www.gaoyunjiao.fun/?p=119
&n