使用TypeScript开发Express应用

首先创建新项目

1
yarn init

然后安装 express

1
2
yarn add express
yarn add @types/express @types/node --dev

安装 TypeScript

1
yarn add --dev typescript

配置 webpack

这是最麻烦的一步。先安装 webpack:

1
2
yarn add --dev webpack webpack-cli webpack-node-externals ts-loader
yarn add --dev nodemon webpack-shell-plugin

添加 webpack.config.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const WebpackShellPlugin = require('webpack-shell-plugin');
const { NODE_ENV = 'production' } = process.env;
const rootPath = path.resolve(__dirname)
let plugins = []
if (NODE_ENV === 'development') {
plugins.push(new WebpackShellPlugin({
onBuildEnd: ['yarn run:dev']
}))
}
module.exports = {
entry: path.resolve(rootPath, './src/index.ts'),
mode: NODE_ENV,
target: 'node',
watch: NODE_ENV === 'development',
externals: [ nodeExternals() ],
output: {
path: path.resolve(rootPath, 'build', NODE_ENV === 'development' ? 'dev' : 'prod'),
filename: 'index.js'
},
resolve: {
extensions: ['.ts', '.js'],
},
plugins: plugins,
module: {
rules: [
{
test: /\.ts$/,
use: [
'ts-loader',
]
}
]
},
}

添加 tsconfig.json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": true,
"outDir": "build"
},
"exclude": [
"node_modules",
"build",
"config",
"release"
]
}

package.json 中添加相关命令:

1
2
3
4
5
6
"scripts": {
"start": "node build/prod/index.js",
"start:dev": "NODE_ENV=development node node_modules/webpack/bin/webpack.js --config webpack.config.js",
"build": "NODE_ENV=production node node_modules/webpack/bin/webpack.js --config webpack.config.js",
"run:dev": "NODE_ENV=development nodemon build/dev/index.js",
}

这样在开发过程只需要执行 yarn run start:dev 启动开发服务器即可,在代码有改动之后会自己重新 build 并重启服务。
开发完成之后执行 yarn build 进行打包发布。

使用 jest 进行测试(可选)

安装 jest:

1
yarn add -D jest @types/jest ts-jest supertest

添加 jest.config.js:

1
2
3
4
5
6
module.exports = {
testEnvironment: 'node',
transform: {
"^.+\\.ts$": "ts-jest"
},
};

相应的测试文件的文件名以 .test.ts 结尾。

然后在 package.json 中添加相关命令:

1
2
3
"scripts": {
"test": "jest"
}

最终项目目录结构如下:

1
2
3
4
5
6
7
8
9
10
.
├── jest.config.js
├── package.json
├── src
│ └── index.ts
├── tests
│ └── index.test.ts
├── tsconfig.json
├── webpack.config.js
└── yarn.lock

参考源代码: https://github.com/wusuopu/baidu-pan-cli