koa2+typescript环境搭建
<p><span style="font-size: 18px"><strong>详细实现方式以及源码下载请前往 https://www.passerma.com/article/70</strong></span></p><p>"koa2+typescript环境搭建</p>
<p>1.安装koa2脚手架</p>
<p>全局安装koa2脚手架 npm install -g koa-generator </p>
<p>2.使用脚手架创建项目</p>
<p> koa2 project </p>
<p>后面的project表示项目的名称，我这里以koa2-ts项目名为命令 koa2 koa2-ts 举例，创建完成，生成以下目录</p>
<p> </p>
<p>进入项目，安装依赖</p>
<p> cd project <br> npm install </p>
<p>3.创建typescript环境</p>
<p>整理文件夹项目，开始构建typescript环境</p>
<p>1).重新整理文件</p>
<p>新建src文件夹，将routes，bin目录移动至src目录下，作为ts编译的入口</p>
<p>将app.js也移入到src目录</p>
<p>将bin下的www文件重命名为www.js</p>
<p> </p>
<p><br>2).创建并配置tsconfig.json文件</p>
<p>使用 tsc -init ，会在当前目录创建tsconfig.json文件，修改配置文件</p>
<p>将compilerOptions里的allowJs解开注释设置为true</p>
<p><br>将compilerOptions里的outDir解开注释设置为./build</p>
<p>将compilerOptions里的rootDir解开注释设置为./src</p>
<p>将compilerOptions里的esModuleInterop解开注释设置为true</p>
<p>在compilerOptions同级增加exclude属性，设置值如下数组</p>
<p>[<br> "node_modules",<br> "views",<br> "public",<br> "build"<br>]</p>
<p>去掉无用项，得到最终配置项</p>
<p>{<br>"compilerOptions": {<br> "target": "es5",<br> "module": "commonjs",<br> "allowJs": true,<br> "outDir": "./build",<br> "rootDir": "./src",<br> "strict": true,<br> "esModuleInterop": true,<br> "forceConsistentCasingInFileNames": true<br>},<br>"exclude": [<br> "node_modules",<br> "views",<br> "public",<br> "build"<br>]<br>}</p>
<p>安装typescript </p>
<p> npm i typescript -D </p>
<p>3).修改package.json文件</p>
<p>先安装项目启动所需依赖两个的文件：nodemon，concurrently</p>
<p> npm i nodemon concurrently -D </p>
<p>增加对应的scripts脚本命令，设置完成后如下</p>
<p>"scripts": {<br> "dev:tsc": "tsc -w",<br> "dev:nodemon": "nodemon build/www",<br> "dev": "tsc && concurrently npm:dev:*",<br> "start": "tsc && node build/www"<br>}<br>4).修改app.js文件内容</p>
<p>引入path模块，修改静态文件以及模板文件目录</p>
<p>let staticPath = path.join(__dirname, '../public'); // 静态地址<br>let viewsPath = path.join(__dirname, '../views'); // 模板地址<br>app.use(require('koa-static')(staticPath))<br>app.use(views(viewsPath, {<br>extension: 'pug'<br>}))<br>5).启动项目，默认端口是3000</p>
<p> npm run dev 启动开发环境，每次修改完成都会实时重启项目</p>
<p> npm start 启动生产环境，只会启动一次项目 </p>
<p><br>浏览器访问http://localhost:3000/，成功启动项目</p>
<p> </p>
<p><br>4.typescript环境下编写接口</p>
<p>在routes下创建tsRoutes.ts文件</p>
<p>引入koa-router，现在可以使用import语法引入了，同时需要安装koa-router的类型定义文件 npm install @types/koa-router -D </p>
<p>import Router from 'koa-router'</p>
<p>const router = new Router();<br>router.prefix('/tsRoutes')</p>
<p>router.get('/', async (ctx) => {<br> ctx.body = {<br> data: <br> };<br>})</p>
<p>export default router</p>
<p>在app.js引入该路由文件即可</p>
<p>浏览器访问http://localhost:3000/tsRoutes，成功解析ts文件</p>
<p> </p>
<p> </p>
<p>5.总结</p>
<p>代码已上传GitHub，链接koa2+typescript环境搭建</p>
<p><span style="font-size: 18px"><strong><strong>详细实现方式以及源码下载请前往 https://www.passerma.com/article/70</strong></strong></span></p><br><br>
来源：https://www.cnblogs.com/passerma/p/14051023.html
頁:
[1]