前言
在第一篇中，我們簡單介紹了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