深入浅出TypeScript（2）- 用TypeScript创建web项目
<h1>前言</h1><p>在第一篇中，我们简单介绍了TypeScript的一些简单语法，那么如果我们只是简单使用TypeScript开发一个web项目，应该做哪些准备？接下来我们就结合TypeScript和Webpack来创建一个基于TypeScript的Web应用程序。</p>
<h1>准备工作</h1>
<p>为了创建第一个Web应用，我们先做一些基本的准备工作，需要安装以下依赖：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">webpack
webpack-cli
webpack-dev-server
webpack-merge
html-webpack-plugin
clean-webpack-plugin
typescript
ts-loader
jest & @types/jest
</pre>
</div>
<p> </p>
<h1>创建项目</h1>
<p>新建文件夹ts-init，npm init -y初始化package.json文件。</p>
<p>之后，我们依次安装上述依赖到项目中，以下是安装之后的package.json文件：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">{
"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"
}
}
</pre>
</div>
<p> </p>
<p>接下来我们按照package.json创建src和build目录，目录结构如下：</p>
<p><img src="https://img2018.cnblogs.com/blog/500685/201908/500685-20190829101003798-1771077498.png"></p>
<p> </p>
<p>让我们引入来创建webpack文件，我们创建在build目录下面。</p>
<p>为了保证我们可以按照develop和production方式来编译，我们创建了四个个webpack文件，如下所示</p>
<p><img src="http://www.gaoyunjiao.fun/wp-content/uploads/2019/08/7CE6D0B0-2AC8-44FD-9916-788BDD459F88-300x133.jpg"></p>
<p>其中，主配置文件为webpack.config.js：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">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);
};
</pre>
</div>
<p> </p>
<p>提取的基础配置为webpack.base.config.js：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
'app': './src/index.ts' // 入口文件
},
output: {
filename: '..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'
}
}
}
</pre>
</div>
<p> </p>
<p>开发环境配置为webpack.dev.config.js：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">module.exports = {
devtool: 'cheap-module-eval-source-map' // 开发环境我们只添加忽略列信息的ts源码的sourcemap
}
</pre>
</div>
<p> </p>
<p>生产环境配置为webpack.pro.config.js：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin()// 生产环境我们只先添加build清除文件，用来清除每次build产生的hash文件，避免因为无用文件导致打包过大
]
}
</pre>
</div>
<p> </p>
<p>接下来，我们在src文件夹下编写HTML文件模板，我们创建一个div用来承载单页应用的内容：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><!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>
</pre>
</div>
<p> </p>
<p>我们src文件夹下面简单编写一个index.ts文件，写入hello world程序</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">let str: string = 'Hello TypeScript'
document.querySelectorAll('.app').innerHTML = str
</pre>
</div>
<p> </p>
<p>ok，一切工作都已经准备完毕，一个ts编写的web程序基本项目已经被我们创建</p>
<h1>运行</h1>
<p>在命令行我们输入：npm start命令,程序默认运行路径为：http://localhost:8080/，我们在自己浏览器打开网址，发现我们的程序运行成功了：</p>
<p><img class="wp-image-123 aligncenter lazyload" alt="" width="519" height="192" data-src="http://www.gaoyunjiao.fun/wp-content/uploads/2019/08/3AB7D7E9-34A7-4D1A-942D-9B8AA22E0AF4-300x111.jpg"></p>
<h1>添加Jest单元测试</h1>
<p>现在为我们的项目添加简单的单元测试。</p>
<p>我们首先在src模块下面创建一个普通的模块math.ts,里面包括加法和减法两个方法，我们将会对这两个方法做简单的单元测试：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">function add(a: number, b: number) {
return a + b;
}
function sub(a: number, b: number) {
return a - b;
}
module.exports = {
add,
sub
}
</pre>
</div>
<p> </p>
<p>接下来我们在test文件夹下创建测试文件math.test.ts：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">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);
})
</pre>
</div>
<p> </p>
<p>我们运行test命令：npm test，运行结果如下：</p>
<p><img alt="" data-src="https://img2018.cnblogs.com/blog/500685/201908/500685-20190829101102369-282339320.png"></p>
<p>由上报错可知，我们test文件写错了，10 -1我们写成了希望=8，我们修改一下test文件：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">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
})
</pre>
</div>
<p> </p>
<p>继续运行npm test：</p>
<p><img src="https://img2018.cnblogs.com/blog/500685/201908/500685-20190829101151653-317462232.png"></p>
<p>由上可知，我们测试通过了。</p>
<p>到此为止，我们的一个简单地可用TypeScript项目开发的Web程序就创建完毕了。</p>
<h1>结尾</h1>
<p>TypeScript应用非常简单，我们只需要做简单的配置，就可以让项目运行起来，TypeScript的类型系统会帮助我们做类型检查，减少我们的边界值错误几率，可以大大增强我们的开发体验。</p>
<p>同时，TypeScript的测试也很简单，用Jest我们可以做到对项目的单元测试，使我们的代码更可靠和更安全。</p>
<p>简单的项目已经被我上传至github：https://github.com/qixingduanyan/ts-web</p>
<p>我的博客地址：http://www.gaoyunjiao.fun/?p=119</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/qixingduanyan/p/11428072.html
頁:
[1]