koa TS ESLint搭建服务器重构版过程详解

清玄子

初始化项目目录

1. yarn init -y

复制代码

安装项目运行所需要的软件包

• 生产依赖
  

1. yarn add koa koa-router cross-env module-alias dotenv

复制代码

1. koa

复制代码

：搭建 Koa 服务的核心软件包。

1. koa-router

复制代码

：Koa 路由软件包。

1. koa-bodyparser

复制代码

：解析 POST 请求参数的软件包。

1. cross-env

复制代码

：为项目添加不同的运行环境。

1. module-alias

复制代码

：可以像在 vue 和 React 中一样使用路径别名。

1. dotenv

复制代码

：加载项目根目录下的

1. .env

复制代码

中的配置。

1. koa-cors

复制代码

：跨域资源处理。

1. copyfiles

复制代码

：拷贝一些无法打包的资源。因为

1. tsc

复制代码

只能编译打包

1. TypeScript

复制代码

代码，其余文件无法一同构建到

1. dist

复制代码

文件夹。

• 开发依赖
  

1. ts-node-dev

复制代码

：和

1. nodemon

复制代码

功能类似，只不过该软件包支持运行

1. ts

复制代码

文件。想要监听文件变化需要加上

1. --respawn

复制代码

参数。

1. typescript

复制代码

：TypeScript 环境支持。

1. npm-run-all

复制代码

：支持同时运行多个

1. npm

复制代码

指令。

1. @types/node

复制代码

：

1. node

复制代码

编码辅助。
执行

1. npx tsc --init

复制代码

生成

1. tsconfig.json

复制代码

：我使用的配置如下，大家可以根据自己的需求配置。

1. {
   
2. "compilerOptions": {
   
3.     "target": "esnext", // 目标语言版本
   
4.     "module": "commonjs", // 指定生成代码的模板标准
   
5.     "sourceMap": true,
   
6.     "outDir": "./dist", // 指定输出目录, 默认是dist文件夹
   
7.     "rootDir": "./src",  
   
8.     "strict": true,
   
9.     "esModuleInterop": true,
   
10.     "allowSyntheticDefaultImports": true,
    
11.     "skipLibCheck": true,
    
12.     "forceConsistentCasingInFileNames": true
    
13. },
    
14. // 需要编译的的文件和目录
    
15. "include": ["src"],
    
16. "exclude": ["node_modules", "dist", "public"]
    
17. }

复制代码

修改package.json

1. "scripts": {
   
2. "dev": "cross-env NODE_ENV=development tsnd --respawn src/main.ts", // 开发环境执行的脚本命令，设置环境变量并监听入口文件的变化
   
3. "build": "run-s clearBuild compile copyPublic", // 将TypeScript项目打包成JavaScript项目
   
4. "clearBuild": "rimraf dist/*", // 在构建的时候清空dist目录
   
5. "compile": "tsc", // 根据tsconfig.json的配置编译TypeScript
   
6. "copyPublic": "copyfiles -u 1 src/public/* dist", // 有一些资源是需要我们在dist和src之间来回拷贝的，可以借助该命令实现拷贝
   
7. // 其余部分可以按照自己项目最终的部署方式自定义
   
8. "serve": "cross-env NODE_ENV=production node dist/main.js",
   
9. "start": "pm2 start ecosystem.config.js",
   
10. "stop": "pm2 stop ecosystem.config.js",
    
11. "restart": "pm2 restart ecosystem.config.js",
    
12. "delete": "pm2 delete ecosystem.config.js"
    
13. },

复制代码

然后在项目上线后，就可以直接通过

1. node

复制代码

、

1. pm2

复制代码

等命令直接运行

1. dist

复制代码

文件夹下打包好的js文件即可。

从.env中加载环境变量

因为我们已经通过脚本命令为不同的指令设置的环境变量，同时又引入了

1. dotenv

复制代码

来加载

1. .env

复制代码

中的环境变量。
这时我们就可以通过不同的来加载不同的

1. .env

复制代码

文件来获取里面配置的不同参数，在这里我参照Create React App 官方的

1. .env

复制代码

文件的加载优先级。

1. npm run dev

复制代码

：

1. env.development.local

复制代码

>

1. .env.local

复制代码

>

1. .env.development

复制代码

>

1. .env

复制代码

1. npm run server

复制代码

：

1. env.production.local

复制代码

>

1. .env.local

复制代码

>

1. .env.production

复制代码

>

1. .env

复制代码

1. const pathResolve = (str: string)
   
2. :
   
3. string => path.resolve(process.cwd(), str);
   
4. const processENV = process.env.NODE_ENV
   
5. const isDev = processENV === "development"
   
6. try {
   
7.     const filename = isDev ? "./.env" : "./.env"
   
8.     dotenv.config({path: pathResolve(filename)});
   
9. } catch (err) {
   
10.     console.log(`${pathResolve(filename)} 不存在`);
    
11. }
    
12. try {
    
13.     const filename = isDev ? "./.env.development" : "./.env.production"
    
14.     dotenv.config({path: pathResolve(filename)});
    
15. } catch (err) {
    
16.     console.log(`${pathResolve(filename)} 不存在`);
    
17. }
    
18. try {
    
19.     const filename = isDev ? "./.env.local" : "./.env.local"
    
20.     dotenv.config({path: pathResolve(filename)});
    
21. } catch (err) {
    
22.     console.log(`${pathResolve(filename)} 不存在`);
    
23. }
    
24. try {
    
25.     const filename = isDev ? "./.env.development.local" : "./.env.production.local"
    
26.     dotenv.config({path: pathResolve(filename)});
    
27. } catch (err) {
    
28.     console.log(`${pathResolve(filename)} 不存在`);
    
29. }

复制代码

我这里的话，只用到了两个环境，

1. development

复制代码

和

1. production

复制代码

，如果还要有测试等环境时，按需配置和加载即可。

配置路径别名

使用

1. module-alias

复制代码

我们就可以轻松的配置使用路径别名，从此和

1. const userData = require('../../file/user.json')

复制代码

这种路径说拜拜。
我们只需要使用

1. const userData = require("@/file/user.json")

复制代码

这种引入方式引入数据，看起来结构更清晰。

用法

将自定义的路径别名添加在

1. package.json

复制代码

中：

1. "_moduleAliases": {
   
2. "@": "./src",
   
3. "@app": "./src/app"
   
4. }

复制代码

同时也要在

1. tsconfig.json

复制代码

中添加路径别名，否则编辑器会报错，同时也会编译不过去。

然后在应用程序的主文件中添加如下代码：

1. import "module-alias/register";

复制代码

一切准备就后，就可以使用一些我们自己定制的路径别名来引入相应的文件了模块了。
更高级的用法参照官方文档来学习：github.com/ilearnio/mo…

目录规范

编码风格规范


Eslint

1. yarn add eslint -D
   
2. # 初始化Eslint的配置文件，会在项目根目录下生成Eslint的配置文件
   
3. npx eslint --init

复制代码

在生成好的

1. Eslint

复制代码

中加入

1. parserOptions.project

复制代码

配置项：

接着我们运行

1. npx eslint src/** --fix

复制代码

Eslint 就会帮助我们自动格式化代码。

在

1. package.json

复制代码

，添加Eslint的运行命令：

1. "script": {
   
2. //......
   
3. "lint:fix": "eslint --fix --ext .js,.ts,.tsx ."
   
4. }

复制代码

同时配置

1. Eslint

复制代码

的忽略文件

1. .eslintignore

复制代码

1. dist
   
2. node_modules
   
3. .idea
   
4. .DS_Store

复制代码

ok，现在我们在格式化的时候执行

1. npm run lint:fix

复制代码

即可。
以上就是koa TS ESLint搭建服务器重构版过程详解的详细内容，更多关于koa TS ESLint 搭建服务器的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/article/265856.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！