搭建 TypeScript 学习项目

前言

随着 TypeScript 使用的越来越广泛,是时候入门 TypeScript 。接下来,这篇文章学习 TypeScript 时,通过 Webpack 搭建的 TypeScript 开发环境,方便学习。本人也是刚开始入门,难免会出现错误,请不吝指正。

接下来进入 TypeScript 开发环境搭建吧!

TypeScript 安装

安装没有什么好说的,就是使用 npm 在终端执行:

1
2
3
npm i typescript -g // 全局安装

tsc -v // 验证是否成功

初始化项目目录

1
2
3
4
mkdir typescript_webpack // 创建文件夹
cd typescript_webpack // 进入文件夹
npm init -y // 生成 package.json 文件,-y:使用默认值快速创建。
tsc -init // 创建 tsconfig.json, 指定所在目录为根目录。

此时在项目目录中创建了一个 package.json 文件,后面会在这里面管理三方库。tsconfig.json 文件中指定了用来编译这个项目的根文件和编译选项。后面具体说明配置项含义。

上面创建项目文件夹,初始化了 package.jsontsconfig.json 文件。下面完成项目目录的初始化,结构如下:

1
2
3
4
5
6
7
8
9
.
├── build
│   └── webpack.config.js // webpack 配置文件
├── package.json // npm 包管理
├── public
│   └── index.html // html 模板文件
├── src
│   └── index.ts //
└── tsconfig.json // typescript 配置文件

至此,项目目录结构初始化完成。

初始化 Webpack

安装 webpack 及其工具和插件。

1
2
3
4
npm i webpack webpack-cli webpack-dev-server -D
// webpack-cli 是脚手架
// webpack-dev-server 开发服务用于开启临时服务
// -D 表示在开发是使用

另外,还用到两个插件html-webpack-pluginclean-webpack-plugin,前者是根据指定 html 打包,后者是在打发布包时清除就得包。

为了更接近真实项目,将 Webpack 配置分为三部分:basedevpro。创建三个文件分别命名为:webpack.base.config.jswebpack.dev.config.jswebpack.pro.config.js。将三个配置文件合并需要使用 webpack-merge

安装以上依赖:

1
npm i clean-webpack-plugin html-webpack-plugin webpack-merge -D

首先配置 webpack.base.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
entry: './src/index.ts', // 入口文件
output: {
filename: 'app.js' // 打包文件名,默认在 `dist` 目录下
},
resolve: {
extensions: ['.js', '.ts', '.tsx']
},
module: {
rules: [
// 配置 loader,后面讲解
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html' // 模板 html
})
]
}

这是基础的 webpack 配置,module 中配置不同的 loader 用于解析不同的文件。接下来配置开发环境的 webpack.dev.config.js

模板文件:

1
2
3
4
5
//...
<body>
<div id="app"></div>
</body>
// ...

声明一个 div 作为根节点,id 设置为 app

1
2
3
4
5
module.exports = {
// 忽略列信息-定位源码-dataurl打包到文件中重编译快
devtool: 'cheap-module-eval-source-map'
// 原始源代码(仅限行)。
}

开发环境这里配置的比较简单仅设置了 devtool,该配置项用于规定是否以及如何生成 source-map。具体请参考Webpack 中文文档

生成环境 webpack.pro.config.js,如下:

1
2
3
4
5
6
7
// 注意和 html-webpack-plugin 的区别。
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}

将三个config.js合并到 webpack.config.js 文件。

1
2
3
4
5
6
7
8
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')
// 根据不同的 ENV 执行不同的 config.js
const config = process.NODE_ENV === 'development' ? devConfig : proConfig

module.exports = merge(baseConfig, config)

引入 TypeScript

在项目中安装 typescriptts-loader。仓库传送门ts-loader

1
npm i typescript ts-loader -D

ts-loader 无论是在开发还是在生成环境都会使用到,所以配置在 webpack.base.config.js 中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//...
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'ts-loader'
}
],
exclude: /node_modules/
}
]
},
//...

基础配置已经完成了,不过还要配置下 package.json 才可以。

1
2
3
4
5
6
7
8
{
"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"
},
}

至此,在 Webpack 中搭建 TypeScript 开发环境完成。下面来测试一下吧!!!

测试

src/index.ts 中写入一下内容:

1
2
3
let helloTS = 'Hello world TS'

document.querySelectorAll('#app')[0].innerHTML = helloTS

终端执行 npm run start,浏览器打开 http://localhost:8080/ 就可以看到上面的字符串了。

小结

本文复习了 Webpack 配置,以及引入 TypeScript,这里仅仅是最基础的内容。还有好些内容没有涉及到,如 tsconfig.js 文件的配置,后续随着学习的深入慢慢的来了解。