搭建 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.json 和 tsconfig.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-plugin 和 clean-webpack-plugin，前者是根据指定 html 打包，后者是在打发布包时清除就得包。

为了更接近真实项目，将 Webpack 配置分为三部分：base，dev 和 pro。创建三个文件分别命名为：webpack.base.config.js，webpack.dev.config.js和webpack.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

在项目中安装 typescript 和 ts-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 文件的配置，后续随着学习的深入慢慢的来了解。