此脚手架优势
- 完整的开发环境，nodejs+git+typeScript+ESLint+Prettier+etc
- 在nodejs中使用typeScript
- 在nodejs中使用import语法
- 更改代码后自动重启node服务器
- 自动编译打包为ts为js文件
- 以koa2为例构建
- 可以接入任何你喜欢的nodejs框架（expess,koa...）
事前准备
0.构建环境
确定已经安装了node.js，git以及typeScript
因为本教程使用yarn构建，所以还需要安装yarn，或者使用相对的npm命令
检查node版本
node -v
→ v16.3.0检测tsc版本（使用npx命令）
npx tsc --version
→ v4.4.4os: windows
编辑器： vs code
搭建nodejs开发环境
1.新建文件夹并打开
mkdir node
cd node2.初始化git
git init
新建.gitignore，设置git忽略文件
内容根据自己的喜好
node_modules
.DS_Store
dist
*.local
*.code-workspace
.vscode3.初始化editorconfig
新建.editorconfig，设置编辑器和ide规范
内容根据自己的喜好或者团队规范
root = true
[*.{js,ts,json}]
indent_size = 2
charset = utf-8
indent_style = space
trim_trailing_whitespace = true
insert_final_newline = true
4.初始化package.json
yarn init
项目设定根据实际情况填写即可
{
"name": "node",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
一般到这一步，最基本的nodejs开发环境就搭建完了
下一步开始追加typescript
nodejs+typescript开发环境搭建
5.typescript依赖安装
安装typeScript的基础依赖包
yarn add -D typescript @types/node
6.初始化tsconfig.json
npx tsc --init
初始化生成的tsconfig.json含有许多备注
如果嫌麻烦可以直接使用下面的模板
项目设定根据实际情况填写即可
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"sourceMap": true,
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src"],
"exclude": ["node_modules", "dist", "public"]
}这里需要注意一下
outDir: 是编译后文件放置的文件夹
include: 是需要检查哪的文件来编译
exclude: 是不需要检查哪的文件来编译
7.确认typescript环境
新建文件夹src
mkdir src
并且在src内新建index.ts
下面是index.ts，极其极其简单的typescript语句
const msg: string = 'Hello World'
console.log(msg)编译typescript
npx tsc
成功的话，这时会在dist文件内生成一个index.js，内容如下
很显然，ts变成了js
"use strict";
const msg = 'Hello World';
console.log(msg);
//# sourceMappingURL=app.js.map使用node命令执行index.js
node dist/index.js
→ Hello World开发执行脚本配置
8.安装依赖
安装ts-node-dev和npm-run-all
yarn add -D ts-node-dev npm-run-all
ts-node-dev：开发用依赖，开发时自动编译ts为js并重启node服务器
npm-run-all：一个命令来执行一个以上的脚本命令
9.配置package.json脚本
"main": "dist/index.js",
...省略
"scripts": {
"dev": "ts-node-dev --respawn src/index.ts",
"resetFolder": "rimraf dist/*",
"compile": "tsc",
"build": "npm-run-all resetFolder compile",
"start": "node ."
},dev：开发的时候用，运行node服务器，伴随代码更改自动重启node服务器,--respawn是命令选项，自动重启，必须
resetFolder：清空dist文件夹
compile：编译typescript
build：清理dist文件夹并打包
start：运行nodejs脚本
到这一步，最基本的typescript+nodejs开发环境就搭建完了
可以试着运行一下上面的命令
ESLint + Prettier
10.初始化并配置eslint
安装eslint依赖
yarn add -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin新建.eslintrc.js文件并写入配置
也可以使用eslint --init生成，但这里方便起见直接复制粘贴了
module.exports = {
root: true,
env: {
node: true,
es2021: true,
},
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
},
plugins: ['@typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
}
导入了eslint后，.eslintrc.js会出现如下报错
Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.这是由于eslint检查和ts检查配置造成的，详见这里
为了解决问题，在tsconfig.json中加入".eslintrc.js"
...省略
"include": [ ".eslintrc.js","src"],
...省略尝试执行eslint
npx eslint src/index.ts
11.初始化并配置prettier
prettier依赖
yarn add -D prettier eslint-config-prettier
新建.prettierjs文件并写入配置
根据自己的喜好
module.exports = {
semi: false,
tabWidth: 2,
printWidth: 120,
proseWrap: 'preserve',
singleQuote: true,
trailingComma: 'all',
}在.eslintrc.js集成prettier
...省略
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
'prettier',
'prettier/@typescript-eslint',
],
rules: {
'prettier/prettier': 'error',
},
...省略在vs code设置了保存并整理代码的话，适当修改并保存就可以看到prettier效果了
至此，typeScript+nodejs+eslint+prettier的开发环境就已经搭建结束了
下面将以koa.js为例，实际上你也可以使用你喜欢的nodejs框架，比如express.js等
集成koa.js
12.初始化koa
yarn add koa
改写index.ts
import Koa from 'koa'
const app = new Koa()
const msg: string = 'Hello World'
app.use(async (ctx: Koa.Context): Promise => {
ctx.body = msg
})
app.listen(7000) 此时会报一些找不到声明文件的错误，所以需要进行下一步，追加声明文件
13.安装koa类型声明文件
yarn add -D @types/koa
找不到声明文件的错误被成功消除
如果今后你要使用路由等koa插件，也需要同时安装该插件的声明文件
14.运行
这时koa.js的集成也已经完成
运行yarn dev并访问http://localhost:7000
yarn dev
可以发现运行成功，页面上有Hello World
15.打包
运行yarn build会发现dist里面的index.js文件
typeScript已经全都被转换为（不认识的）js文件了
yarn build
到这里typeScript+koa2+eslint+prettier的开发环境就已经完全搭建结束了
最后
附赠上完整package.json文件
{
"name": "node",
"version": "1.0.0",
"main": "dist/index.js",
"license": "MIT",
"scripts": {
"dev": "ts-node-dev --respawn src/index.ts",
"resetFolder": "rimraf dist/*",
"compile": "tsc",
"build": "npm-run-all resetFolder compile",
"start": "node ."
},
"dependencies": {
"koa": "^2.13.4"
},
"devDependencies": {
"@types/koa": "^2.13.4",
"@types/node": "^17.0.16",
"@typescript-eslint/eslint-plugin": "^5.11.0",
"@typescript-eslint/parser": "^5.11.0",
"eslint": "^8.8.0",
"eslint-config-prettier": "^8.3.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.5.1",
"ts-node-dev": "^1.1.8",
"typescript": "^4.5.5"
}
}