首页 > 其他 > 详细

koa2+typescript环境搭建

时间:2020-11-28 09:24:48      阅读:31      评论:0      收藏:0      [点我收藏+]

详细实现方式以及源码下载请前往 https://www.passerma.com/article/70

"koa2+typescript环境搭建

1.安装koa2脚手架

全局安装koa2脚手架  npm install -g koa-generator  

2.使用脚手架创建项目

  koa2 project  

后面的project表示项目的名称,我这里以koa2-ts项目名为命令  koa2 koa2-ts  举例,创建完成,生成以下目录

 

进入项目,安装依赖

  cd project   
  npm install  

3.创建typescript环境

整理文件夹项目,开始构建typescript环境

1).重新整理文件

新建src文件夹,将routes,bin目录移动至src目录下,作为ts编译的入口

将app.js也移入到src目录

将bin下的www文件重命名为www.js

 


2).创建并配置tsconfig.json文件

使用  tsc -init  ,会在当前目录创建tsconfig.json文件,修改配置文件

将compilerOptions里的allowJs解开注释设置为true


将compilerOptions里的outDir解开注释设置为./build

将compilerOptions里的rootDir解开注释设置为./src

将compilerOptions里的esModuleInterop解开注释设置为true

在compilerOptions同级增加exclude属性,设置值如下数组

[
"node_modules",
"views",
"public",
"build"
]

去掉无用项,得到最终配置项

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"allowJs": true,
"outDir": "./build",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true
},
"exclude": [
"node_modules",
"views",
"public",
"build"
]
}

安装typescript 

  npm i typescript -D  

3).修改package.json文件

先安装项目启动所需依赖两个的文件:nodemon,concurrently

  npm i nodemon concurrently -D  

增加对应的scripts脚本命令,设置完成后如下

"scripts": {
"dev:tsc": "tsc -w",
"dev:nodemon": "nodemon build/www",
"dev": "tsc && concurrently npm:dev:*",
"start": "tsc && node build/www"
}
4).修改app.js文件内容

引入path模块,修改静态文件以及模板文件目录

let staticPath = path.join(__dirname, ‘../public‘); // 静态地址
let viewsPath = path.join(__dirname, ‘../views‘); // 模板地址
app.use(require(‘koa-static‘)(staticPath))
app.use(views(viewsPath, {
extension: ‘pug‘
}))
5).启动项目,默认端口是3000

  npm run dev  启动开发环境,每次修改完成都会实时重启项目

  npm start  启动生产环境,只会启动一次项目 


浏览器访问http://localhost:3000/,成功启动项目

 


4.typescript环境下编写接口

在routes下创建tsRoutes.ts文件

引入koa-router,现在可以使用import语法引入了,同时需要安装koa-router的类型定义文件  npm install @types/koa-router -D  

import Router from ‘koa-router‘

const router = new Router();
router.prefix(‘/tsRoutes‘)

router.get(‘/‘, async (ctx) => {
ctx.body = {
data: [1, 2, 3]
};
})

export default router

在app.js引入该路由文件即可

浏览器访问http://localhost:3000/tsRoutes,成功解析ts文件

 

 

5.总结

代码已上传GitHub,链接koa2+typescript环境搭建

详细实现方式以及源码下载请前往 https://www.passerma.com/article/70

koa2+typescript环境搭建

原文:https://www.cnblogs.com/passerma/p/14051023.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!