此脚手架劣势

  • 残缺的开发环境，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.4

os: windows
编辑器： vs code

搭建nodejs开发环境

1.新建文件夹并关上

mkdir nodecd node

2.初始化git

git init

新建.gitignore，设置git疏忽文件
内容依据本人的爱好

node_modules.DS_Storedist*.local*.code-workspace.vscode

3.初始化editorconfig

新建.editorconfig，设置编辑器和ide标准
内容依据本人的爱好或者团队标准

root = true[*.{js,ts,json}]indent_size = 2charset = utf-8indent_style = spacetrim_trailing_whitespace = trueinsert_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<void> => {  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"  }}