前言

在第一篇中，我们简单介绍了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

深入浅出TypeScript（2）- 用TypeScript创建web项目的更多相关文章

  1. angular2+typescript在asp.net MVC Web项目上的实现

    网上现在还没有关于angular2+typescript在asp.net mvc web项目上的实现的系统介绍,这里我也只是探索到了一个简单的方式,还有很多问题没能解决.但是能有个好的开头也值得记录一 ...

  2. 【maven】maven创建web项目-pom文件提示web.xml is missing and <failOnMissingWebXml> is set to true

    使用maven创建web项目,选择war类型后,pom文件红叉 提示web.xml is missing and <failOnMissingWebXml> is set to true ...

  3. eclipse中Maven创建WEB项目

    刚刚学到Maven的时候总是容易忽视到一些创建Maven项目是的步骤, 这里记录笔者熟悉一种,直接创建Maven Project 下面开始吧--- 选择web-app,没得说,然后那些groupID ...

  4. Intellij IDEA 创建Web项目并在Tomcat中部署运行（不使用maven）【转载】

    原文链接:http://www.thinksaas.cn/topics/0/350/350000.html 一.创建Web项目 1.File -> New Module,进入创建项目窗口 2.选 ...

  5. Maven学习总结(七)——eclipse中使用Maven创建Web项目

    一.创建Web项目 1.1 选择建立Maven Project 选择File -> New ->Project,如下图所示:

  6. Maven——eclipse中使用Maven创建Web项目

    原文:http://www.cnblogs.com/xdp-gacl/p/4054814.html 一.创建Web项目 1.1 选择建立Maven Project 选择File -> New - ...

  7. Intellij IDEA 创建Web项目并在Tomcat中部署运行

      一.创建Web项目 1.File -> New Module,进入创建项目窗口 2.选择Java类型,在 Module name 处输入项目名,点击Next 3.勾选 Web Applica ...

  8. Intellij Idea 创建Web项目入门（一）

    相关软件: Intellij Idea14:http://pan.baidu.com/s/1nu16VyD JDK7:http://pan.baidu.com/s/1dEstJ5f Tomcat(ap ...

  9. 转】Maven学习总结(七)——eclipse中使用Maven创建Web项目

    原博文出自于: http://www.cnblogs.com/xdp-gacl/p/4054814.html 感谢! 一.创建Web项目 1.1 选择建立Maven Project 选择File -& ...

  10. IntelliJ IDEA创建web项目及异常问题解决

    IDEA配置Tomcat: 1.下载Tomcat,本次使用的是apache-tomcat-6.0.43 2.IDEA配置Tomcat 在idea中的Settings(Ctrl+Alt+s)(或者点击图 ...

随机推荐

  1. Y服务-你真的懂 Yaml 吗

    目录 一.什么是 Yaml 二.Yaml 的语法 三.操作 Yaml A. 引入框架 B. 代码片段 C. 完整案例 参考文档 在Java 的世界里,配置的事情都交给了 Properties,要追溯起 ...

  2. [leetcode] 17. Letter Combinations of a Phone Number (medium)

    递归DFS class Solution { Map<Character, String> mapping = new HashMap<>(); public List< ...

  3. 关于Object.defineProperty 的基础知识

    Object.defineProperty 这个方法大家耳熟能详,可以对 对象的属性进行添加或修改的操作.即可以进行  数据劫持 .vue就是通过这个方法来劫持数据的. 平时我们创建对象的时候,一般通 ...

  4. 跟着大彬读源码 - Redis 6 - 对象和数据类型（下）

    继续撸我们的对象和数据类型. 上节我们一起认识了字符串和列表,接下来还有哈希.集合和有序集合. 1 哈希对象 哈希对象的可选编码分别是:ziplist 和 hashtable. 1.1 ziplist ...

  5. 浅谈CMDB

    CMDB和运维自动化 一.运维 运维,指的是对已经搭建好的网络,软件,硬件进行维护.运维领域也是细分的,有硬件运维和软件运维 硬件运维主要包括对基础设施的运维,比如机房的设备,主机的硬盘,内存这些物理 ...

  6. linux初学者-系统服务的控制

      linux系统中系统服务的控制是比较重要的一部分,这也直接影响到计算机的使用,以下将会介绍一些系统服务的控制. 1.系统服务命令 系统的初始化程序是系统开始的第一个进程,pid为1.可以通过以下命 ...

  7. set和map结构，class类

    1.set数据结构和map数据结构: (1)set: 数据结构set(集合,无序且值不能重复的数据集合,特点是key值和value值相同,没有重复的value //1 创建set ,,]) conso ...

  8. [ PyQt入门教程 ] PyQt5基本控件使用:消息弹出、用户输入、文件对话框

    本文主要介绍PyQt界面实现中常用的消息弹出对话框.提供用户输入的输入框.打开文件获取文件/目录路径的文件对话框.学习这三种控件前,先想一下它们使用的主要场景: 1.消息弹出对话框.程序遇到问题需要退 ...

  9. thinkphp3.2使用七牛云上传文件

    最近项目中用到了七牛云服务,来分享一下thinkphp使用七牛云来进行文件上传 1.首先在七牛云创建一个空间,例如空间名为test.获取secrectKey,accessKey 2.在thinkphp ...

  10. 【Java例题】5.1 多项式计算

    1. 计算下列多项式的值. pn=an*x^n+...+a1*x+a0其中,"^"表示乘方. x.n以及ai(i=0,1,...,n-1)由键盘输入. package chapte ...