（1）初始化項目
新建一個文件夾“client-side”，作為項目根目錄，進入這個文件夾：
我們先使用 npm 初始化這個項目：
這時我們看到了在根目錄下已經創建了一個 package.json 文件，接下來我們創建幾個文件夾：
npm install -g tslint
mkdir client-side
cd client-side
# 使用npm默認package.json配置
npm init -y
# 或者使用交互式自行配置，遇到選項如果直接敲回車即使用括號內的值
npm init
package name: (client-side) # 可敲回車即使用client-side這個名字，也可輸入其他項目名
version: (1.0.0) # 版本號，默認1.0.0
description: # 項目描述，默認為空
entry point: (index.js) # 入口文件，我們這里改為./src/index.ts
test command: # 測試指令，默認為空
git repository: # git倉庫地址，默認為空
keywords: # 項目關鍵詞，多個關鍵詞用逗號隔開，我們這里寫typescript,client,lison
author: # 項目作者，這里寫lison<lison16new@163.com>
license: (ISC) # 項目使用的協議，默認是ISC，我這里使用MIT協議
# 最后會列出所有配置的項以及值，如果沒問題，敲回車即可。src：用來存放項目的開發資源，在 src 下創建如下文件夾：
utils：和業務相關的可復用方法
tools：和業務無關的純工具函數
assets：圖片字體等靜態資源
api：可復用的接口請求方法
config：配置文件
src 的同級目錄：
typings：模塊聲明文件
build：webpack 構建配置
接下來我們在全局安裝 typescript ，全局安裝后，你就可以在任意文件夾使用tsc命令：
如果全局安裝失敗，多數都是權限問題，要以管理員權限運行。
安裝成功后我們進入項目根目錄，使用typescript進行初始化：
注意：運行的指令是tsc，不是typescript。
這時你會發現在項目根目錄多了一個 tsconfig.json 文件，里面有很多內容。而且你可能會奇怪，json 文件里怎么可
以使用 // 和 /**/ 注釋，這個是 TS 在 1.8 版本支持的，我們后面課程講重要更新的時候會講到。
tsconfig.json 里默認有 4 項沒有注釋的配置，有一個需要提前講下，就是"lib"這個配置項，他是一個數組，他用來
配置需要引入的聲明庫文件，我們后面會用到ES6語法，和DOM相關內容，所以我們需要引入兩個聲明庫文件，需
要在這個數組中添加"es6"和"dom"，也就是修改數組為 [“dom”, “es6”] ，其他暫時不用修改，接着往下進行。
然后我們還需要在項目里安裝一下typescript，因為我們要搭配使用webpack進行編譯和本地開發，不是使用tsc指
令，所以要在項目安裝一下：
（2））配配置置TSLint
接下來我們接入TSLint，如果你對代碼的風格統一有要求，就需要用到TSLint了，另外TSLint會給你在很多地方起
到提示作用，所以還是建議加入的。接下來我們來接入它。
首先需要在全局安裝TSLint，記着要用管理員身份運行：
然后在我們的項目根目錄下，使用TSLint初始化我們的配置文件：
npm install typescript -g
tsc --init
npm install typescript
npm install tslint -g
tslint -i運行結束之后，你會發現項目根目錄下多了一個 tslint.json 文件，這個就是TSLint的配置文件了，它會根據這個
文件對我們的代碼進行檢查，生成的tslint.json文件有下面幾個字段：
defaultSeverity是提醒級別，如果為error則會報錯，如果為warning則會警告，如果設為off則關閉，那TSLint就關
閉了；
extends可指定繼承指定的預設配置規則；
jsRules用來配置對 .js 和 .jsx 文件的校驗，配置規則的方法和下面的rules一樣；
rules是重點了，我們要讓TSLint根據怎樣的規則來檢查代碼，都是在這個里面配置，比如當我們不允許代碼中使
用 eval 方法時，就要在這里配置 "no-eval": true ；
rulesDirectory可以指定規則配置文件，這里指定相對路徑。
以上就是我們初始化的時候TSLint生成的tslint.json文件初始字段，如果你發現你生成的文件和這里看到的不一樣，
可能是TSLint版本升級導致的，你可以參照TSLint配置說明了解他們的用途。如果你想要查看某條規則的配置及詳
情，可以參照TSLint規則說明。
（3））配配置置webpack
接下來我們要搭配使用 webpack 進行項目的開發和打包，先來安裝 webpack、webpack-cli 和 webpack-dev-
server：
我們將它們安裝在項目中，並且作為開發依賴(-D)安裝。接下來添加一個 webpack 配置文件，放在 build 文件夾
下，我們給這個文件起名 webpack.config.js，然后在 package.json 里指定啟動命令：
這里我們用到一個插件"cross-env"，並且后面跟着一個參數 NODE_ENV=development，這個用來在
webpack.config.js 里通過 process.env.NODE_ENV 來獲取當前是開發還是生產環境，這個插件要安裝：
緊接着我們要在 webpack.config.js 中書寫配置：
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"jsRules": {},
"rules": {},
"rulesDirectory": []
}
npm install webpack webpack-cli webpack-dev-server -D
{
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js"
}
}
npm install cross-envconst HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
// 指定入口文件
// 這里我們在src文件夾下創建一個index.ts
entry: "./src/index.ts",
// 指定輸出文件名
output: {
filename: "main.js"
},
resolve: {
// 自動解析一下拓展，當我們要引入src/index.ts的時候，只需要寫src/index即可
// 后面我們講TS模塊解析的時候，寫src也可以
extensions: [".tsx", ".ts", ".js"]
},
module: {
// 配置以.ts/.tsx結尾的文件都用ts-loader解析
// 這里我們用到ts-loader，所以要安裝一下
// npm install ts-loader -D
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
}
]
},
// 指定編譯后是否生成source-map，這里判斷如果是生產打包環境則不生產source-map
devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map",
// 這里使用webpack-dev-server，進行本地開發調試
devServer: {
contentBase: "./dist",
stats: "errors-only",
compress: false,
host: "localhost",
port: 8089
},
// 這里用到兩個插件，所以首先我們要記着安裝
// npm install html-webpack-plugin clean-webpack-plugin -D
plugins: [
// 這里在編譯之前先刪除dist文件夾
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ["./dist"]
}),
// 這里我們指定編譯需要用模板，模板文件是./src/template/index.html，所以接下來我們要創建一個index.html文件
new HtmlWebpackPlugin({
template: "./src/template/index.html"
})
]
};
這里我們用到了兩個webpack插件，第一個 clean-webpack-plugin 插件用於刪除某個文件夾，我們編譯項目的時
候需要重新清掉上次打包生成的dist文件夾，然后進行重新編譯，所以需要用到這個插件將上次打包的dist文件夾清
掉。
第二個 html-webpack-plugin 插件用於指定編譯的模板，這里我們指定模板為 "./src/template/index.html" 文
件，打包時會根據此html文件生成頁面入口文件。
接下來我們創建這個 index.html 模板：<!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>TS-Learning</title>
</head>
<body></body>
</html>
現在我們運行如下命令來啟動本地服務：
npm run start
我們看到啟動成功了，接下來我們在 index.ts 文件里寫一點邏輯：
// index.ts
let a: number = 123;
const h1 = document.createElement("h1");
h1.innerHTML = "Hello, I am Lison";
document.body.appendChild(h1);
當我們保存代碼的時候，開發服務器重新編譯了代碼，並且我們的瀏覽器也更新了。
我們再來配置一下打包命令，在 package.json 的 scripts 里增加 build 指令：
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config ./build/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --mode=production --config ./build/webpack.config.js"
}
}
同樣通過 cross-env NODE_ENV=production 傳入參數。現在我們運行如下命令即可執行打包：
npm run build
現在我們前端項目的搭建就大功告成了，
啟動本地服務成功：
index.ts
let a: number = 123; const h1 = document.createElement("h1"); h1.innerHTML = "Hello, I am Lison"; document.body.appendChild(h1);
index.html
<!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>TS-Learning</title> </head> <body></body> </html>
package.json
{ "name": "client-side1", "version": "1.0.0", "description": "", "main": "./src/index.ts", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js", "build": "cross-env NODE_ENV=production webpack --mode=production --config ./build/webpack.config.js" }, "author": "zxw", "license": "ISC", "dependencies": { "cross-env": "^5.2.0", "typescript": "^3.5.3" }, "devDependencies": { "clean-webpack-plugin": "^3.0.0", "html-webpack-plugin": "^3.2.0", "ts-loader": "^6.0.4", "webpack": "^4.39.1", "webpack-cli": "^3.3.6", "webpack-dev-server": "^3.7.2" } }
webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); module.exports = { // 指定入口文件 // 這里我們在src文件夾下創建一個index.ts entry: "./src/index.ts", // 指定輸出文件名 output: { filename: "main.js" }, resolve: { // 自動解析一下拓展，當我們要引入src/index.ts的時候，只需要寫src/index即可 // 后面我們講TS模塊解析的時候，寫src也可以 extensions: [".tsx", ".ts", ".js"] }, module: { // 配置以.ts/.tsx結尾的文件都用ts-loader解析 // 這里我們用到ts-loader，所以要安裝一下 // npm install ts-loader -D rules: [{ test: /\.tsx?$/, use: "ts-loader", exclude: /node_modules/ } ] }, // 指定編譯后是否生成source-map，這里判斷如果是生產打包環境則不生產source-map devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map", // 這里使用webpack-dev-server，進行本地開發調試 devServer: { contentBase: "./dist", stats: "errors-only", compress: false, host: "localhost", port: 8089 }, // 這里用到兩個插件，所以首先我們要記着安裝 // npm install html-webpack-plugin clean-webpack-plugin -D plugins: [ // 這里在編譯之前先刪除dist文件夾 new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ["./dist"] }), // 這里我們指定編譯需要用模板，模板文件是./src/template/index.html，所以接下來我們要創建一個index.html文件 new HtmlWebpackPlugin({ template: "./src/template/index.html" })] };
項目的總體目錄：
倉庫：
https://gitee.com/guangzhou110/lingjichuxuetoutypescript.git