搭建 TypeScript 开发环境
随着 TypeScript
使用的越来越广泛，是时候入门 TypeScript
。接下来，这篇文章学习 TypeScript
时，通过 Webpack 搭建的 TypeScript
开发环境，方便学习。本人也是刚开始入门，难免会出现错误，请不吝指正。
接下来进入 TypeScript
开发环境搭建吧！
TypeScript 安装
安装没有什么好说的，就是使用 npm
在终端执行：
npm i typescript -g // 全局安装 tsc -v // 验证是否成功
初始化项目目录
mkdir typescript_webpack // 创建文件夹 cd typescript_webpack // 进入文件夹 npm init -y // 生成 package.json 文件，-y：使用默认值快速创建。 tsc -init // 创建 tsconfig.json， 指定所在目录为根目录。
此时在项目目录中创建了一个 package.json
文件，后面会在这里面管理三方库。 tsconfig.json
文件中指定了用来编译这个项目的根文件和编译选项。后面具体说明配置项含义。
上面创建项目文件夹，初始化了 package.json
和 tsconfig.json
文件。下面完成项目目录的初始化，结构如下：
. ├── build │ └── webpack.config.js // webpack 配置文件 ├── package.json // npm 包管理 ├── public │ └── index.html // html 模板文件 ├── src │ └── index.ts // └── tsconfig.json // typescript 配置文件
至此，项目目录结构初始化完成。
初始化 Webpack
安装 webpack
及其工具和插件。
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
。
安装以上依赖：
npm i clean-webpack-plugin html-webpack-plugin webpack-merge -D
首先配置 webpack.base.config.js
，
// 引入插件
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
。
模板文件：
//... // ...
声明一个 div
作为根节点， id
设置为 app
。
module.exports = {
// 忽略列信息-定位源码-dataurl打包到文件中重编译快
devtool: 'cheap-module-eval-source-map'
// 原始源代码（仅限行）。
}
开发环境这里配置的比较简单仅设置了 devtool
，该配置项用于规定是否以及如何生成 source-map
。具体请参考 Webpack 中文文档
。
生成环境 webpack.pro.config.js
，如下：
// 注意和 html-webpack-plugin 的区别。
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}
将三个 config.js
合并到 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')
// 根据不同的 ENV 执行不同的 config.js
const config = process.NODE_ENV === 'development' ? devConfig : proConfig
module.exports = merge(baseConfig, config)
引入 TypeScript
在项目中安装 typescript
和 ts-loader
。仓库传送门 ts-loader
npm i typescript ts-loader -D
ts-loader
无论是在开发还是在生成环境都会使用到，所以配置在 webpack.base.config.js
中。
//...
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'ts-loader'
}
],
exclude: /node_modules/
}
]
},
//...
基础配置已经完成了，不过还要配置下 package.json
才可以。
{
"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
中写入一下内容：
let helloTS = 'Hello world TS'
document.querySelectorAll('#app')[0].innerHTML = helloTS
终端执行 npm run start
，浏览器打开 http://localhost:8080/
就可以看到上面的字符串了。
About The Author
