欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用typescript改造koa開發(fā)框架的實(shí)現(xiàn)

 更新時(shí)間：2020年02月04日 14:51:25   作者：Jeff''s World  
這篇文章主要介紹了使用typescript改造koa開發(fā)框架的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

強(qiáng)類型的 TypeScript 開發(fā)體驗(yàn)和維護(hù)項(xiàng)目上相比 JavaScript 有著明顯的優(yōu)勢(shì)，那么對(duì)常用的腳手架進(jìn)行改造也就勢(shì)在必行了。

接下來開始對(duì)基于 koa 框架的 node 后端腳手架進(jìn)行改造：

  1. 項(xiàng)目開發(fā)環(huán)境 和 typescript 編譯環(huán)境的搭建；
  2. 對(duì) node、koa、koa中間件和使用到的庫 添加類型化支持；
  3. 基于 typesript 的特性改造項(xiàng)目。

項(xiàng)目開發(fā)環(huán)境搭建

基于 gulp 搭建開發(fā)編譯環(huán)境，gulp-typescript 插件用于編譯 typescript 文件， gulp-nodemon 則可以監(jiān)控文件內(nèi)容的變更，自動(dòng)編譯和重啟node服務(wù)，提升開發(fā)效率。

npm install -D gulp gulp-nodemon gulp-typescript ts-node typescript

gulp 的配置

gulpfile.js 的設(shè)置

const { src, dest, watch, series, task } = require('gulp');
const del = require('del');
const ts = require('gulp-typescript');
const nodemon = require('gulp-nodemon');
const tsProject = ts.createProject('tsconfig.json');

function clean(cb) {
 return del(['dist'], cb);
}

// 輸出 js 到 dist目錄
function toJs() {
 return src('src/**/*.ts')
  .pipe(tsProject())
  .pipe(dest('dist'));
}

// nodemon 監(jiān)控 ts 文件
function runNodemon() {
 nodemon({
  inspect: true,
  script: 'src/app.ts',
  watch: ['src'],
  ext: 'ts',
  env: { NODE_ENV: 'development' },
  // tasks: ['build'],
 }).on('crash', () => {
  console.error('Application has crashed!\n');
 });
}

const build = series(clean, toJs);
task('build', build);
exports.build = build;
exports.default = runNodemon;

typescript 的配置

tsconfig.json 的設(shè)置

{
 "compilerOptions": {
  "baseUrl": ".", // import的相對(duì)起始路徑
  "outDir": "./dist", // 構(gòu)建輸出目錄
  "module": "commonjs",
  "target": "esnext",// node 環(huán)境支持 esnext
  "allowSyntheticDefaultImports": true,
  "importHelpers": true,
  "strict": false,
  "moduleResolution": "node",
  "esModuleInterop": true,
  "forceConsistentCasingInFileNames": true,
  "noImplicitAny": true,
  "suppressImplicitAnyIndexErrors": true,
  "noUnusedParameters": true,
  "noUnusedLocals": true,
  "noImplicitReturns": true,
  "experimentalDecorators": true, // 開啟裝飾器的使用
  "emitDecoratorMetadata": true,
  "allowJs": true,
  "sourceMap": true,
  "paths": {
   "@/*": [ "src/*" ]
  }
 },
 "include": [
  "src/**/*"
 ],
 "exclude": [
  "node_modules",
  "dist"
 ]
}

eslint 的配置

當(dāng)然 eslint 也要添加對(duì) typescript 對(duì)支持

npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

.eslintrc.json 的設(shè)置

{
 "env": {
  "es6": true,
  "node": true
 },
 "extends": [
  "eslint:recommended",
  "plugin:@typescript-eslint/eslint-recommended"
 ],
 "globals": {
  "Atomics": "readonly",
  "SharedArrayBuffer": "readonly"
 },
 "parser": "@typescript-eslint/parser",
 "parserOptions": {
  "ecmaVersion": 2018,
  "sourceType": "module"
 },
 "plugins": [
  "@typescript-eslint"
 ],
 "rules": {
  "indent": [ "warn", 2 ],
  "no-unused-vars": 0
 }
}

package.json 運(yùn)行配置

最后就是設(shè)置 package.json 的 scripts

"scripts": {
 "start": "gulp",// dev
 "build": "gulp build", // output
 "eslint": "eslint --fix --ext .js,.ts src/",
 "server": "export NODE_ENV=production && node dist/app" // production server
},

添加類型化支持

項(xiàng)目主要使用到了以下的組件

jsonwebtoken
koa
koa-body
koa-compress
koa-favicon
koa-logger
koa-router
koa-static
koa2-cors
log4js

那么就要安裝對(duì)應(yīng)的 type 文件，當(dāng)然別忘了 @types/node

npm install -D @types/jsonwebtoken @types/koa @types/koa-compress @types/koa-favicon @types/koa-logger @types/koa-router @types/koa-static @types/koa2-cors @types/log4js @types/node

使用 typescript 裝飾器 改造項(xiàng)目

.net mvc 框架有個(gè)很便利的地方就是 使用裝飾器對(duì)控制器進(jìn)行配置，現(xiàn)在通過 typescript 的裝飾器也可以實(shí)現(xiàn)相同的功能。這里需要使用到反射相關(guān)的庫 reflect-metadata，用過 Java 或 C# 的小伙伴，對(duì)反射的原理一定不陌生。

定義http請(qǐng)求的裝飾器

我們?cè)僖膊恍枰诼酚膳渲煤涂刂破鞣椒ㄖ皝砘夭檎液推ヅ淞?/p> 

import 'reflect-metadata'
import { ROUTER_MAP } from '../constant'

/**
 * @desc 生成 http method 裝飾器
 * @param {string} method - http method，如 get、post、head
 * @return Decorator - 裝飾器
 */
function createMethodDecorator(method: string) {
 // 裝飾器接收路由 path 作為參數(shù)
 return function httpMethodDecorator(path: string) {
  return (proto: any, name: string) => {
   const target = proto.constructor;
   const routeMap = Reflect.getMetadata(ROUTER_MAP, target, 'method') || [];
   routeMap.push({ name, method, path });
   Reflect.defineMetadata(ROUTER_MAP, routeMap, target, 'method');
  };
 };
}

// 導(dǎo)出 http method 裝飾器
export const post = createMethodDecorator('post');

export const get = createMethodDecorator('get');

export const del = createMethodDecorator('del');

export const put = createMethodDecorator('put');

export const patch = createMethodDecorator('patch');

export const options = createMethodDecorator('options');

export const head = createMethodDecorator('head');

export const all = createMethodDecorator('all');

裝飾控制器的方法

export default class Sign {
  
 @post('/login')
 async login (ctx: Context) {
  const { email, password } = ctx.request.body;
  const users = await userDao.getUser({ email });
  // ...
  return ctx.body = {
   code: 0,
   message: '登錄成功',
   data
  };
 }

 @post('/register')
 async register (ctx: Context) {
  const { email, password } = ctx.request.body;
  const salt = makeSalt();
  // ...
  return ctx.body = {
   code: 0,
   message: '注冊(cè)成功！',
   data
  }
 }
 
}

收集元數(shù)據(jù)和添加路由

我們已經(jīng)把裝飾器添加到對(duì)應(yīng)控制器的方法上了，那么怎么把元數(shù)據(jù)收集起來呢？這就需要用到 node 提供的 fs 文件模塊，node服務(wù)第一次啟動(dòng)的時(shí)候，掃描一遍controller文件夾，收集到所有控制器模塊，結(jié)合裝飾器收集到的metadata，就可以把對(duì)應(yīng)的方法添加到 koa-router。

import 'reflect-metadata'
import fs from 'fs'
import path from 'path'
import { ROUTER_MAP } from './constant'
import { RouteMeta } from './type'
import Router from 'koa-router'

const addRouter = (router: Router) => {
 const ctrPath = path.join(__dirname, 'controller');
 const modules: ObjectConstructor[] = [];
 // 掃描controller文件夾，收集所有controller
 fs.readdirSync(ctrPath).forEach(name => {
  if (/^[^.]+?\.(t|j)s$/.test(name)) {
   modules.push(require(path.join(ctrPath, name)).default)
  }
 });
 // 結(jié)合meta數(shù)據(jù)添加路由
 modules.forEach(m => {
  const routerMap: RouteMeta[] = Reflect.getMetadata(ROUTER_MAP, m, 'method') || [];
  if (routerMap.length) {
   const ctr = new m();
   routerMap.forEach(route => {
    const { name, method, path } = route;
    router[method](path, ctr[name]);
   })
  }
 })
}

export default addRouter

最后

這樣對(duì)koa項(xiàng)目腳手架的改造基本完成，源碼請(qǐng)查看koa-server

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論