koa开发实践1：基于 gulp 搭建 typescript 自动构建环境

- [src]
     | - logger.ts
     | - app.ts
- gulpfile.ts
- packa.json
- tsconfig.json

npm i @esbuild-kit/cjs-loader
# or yarn
yarn add -D @esbuild-kit/cjs-loader
# ro pnpm
pnpm i @esbuild-kit/cjs-loader -D

gulp

"gulp:build": "gulp"

// gulpfile.ts
import path from "path";
import ts from "gulp-typescript";
import { src, dest, series } from "gulp";
import { deleteAsync } from "del";
const BASE_DIR = __dirname;
const DIST_DIR = path.join(BASE_DIR, 'dist');
const APP_JS = path.join(DIST_DIR, 'app.js')
// 清除旧文件
async function clearOldFiles(): Promise<void> {
  await deleteAsync(["dist/**/*"]);
  return;
}
// 编译 ts 文件为 js 文件
function buildTypescript(): NodeJS.ReadWriteStream {
  return src("./src/**/*.ts")
    .pipe(
      ts({
        noImplicitAny: false,
        removeComments: false,
        esModuleInterop:true,
        declaration: true,
        target: "es2017",
        module: "commonjs",
        outDir: './dist',
        lib: ["DOM", "ES2015", "ES2016", "ES2017", "ES2018", "ES2022"],
        declarationDir: './dist/types'
      })
    )
    .pipe(dest("./dist"));
}
// 注册默认任务
const build = series([
  clearOldFiles, // 启动时先删除旧文件
  series([
    buildTypescript, // 编译 ts 为 js
  ]),
]);
export default build;

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "rootDir": "./",
    "lib": ["DOM", "ES2015", "ES2016", "ES2017", "ES2018", "ES2022"],
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": false,
    "skipLibCheck": true,
  },
  "include":[
    "./src/**/*"
  ]
}

// package.json
script:{
  // ...
  "ts:build": "gulp --require @esbuild-kit/cjs-loader"
}

import { green, yellow, red  } from 'jc-color';
function logger(message: string, level: string) {
  const time = new Date().toLocaleString();
  switch (level) {
    case 'info':
      green(`[INFO] [${time}] ${message}`).print();
      break;
    case 'warn':
      yellow(`[WARN] [${time}] ${message}`).print();
      break;
    case 'error':
      red(`[ERROR] [${time}] ${message}`).print();
      break;
    default:
      console.log(message);
  }
}
logger('This is an info message', 'info');
logger('This is a warning message', 'warn');
logger('This is an error message', 'error');

import { blue, cyan, yellow, red  } from 'jc-color';
class Logger {
  static debug(message: string) {
    blue(`[DEBUG] [${new Date().toISOString()}] ${message}`).ptint();
  }
  static info(message: string) {
    cyan(`[INFO] [${new Date().toISOString()}] ${message}`).ptint();
  }
  static warn(message: string) {
    yellow(`[WARN] [${new Date().toISOString()}] ${message}`).ptint();
  }
  static error(message: string) {
    red(`[ERROR] [${new Date().toISOString()}] ${message}`).ptint();
  }
}
Logger.debug('This is a debug message');
Logger.info('This is an info message');
Logger.warn('This is a warning message');
Logger.error('This is an error message');

npm i log4js
# or
yarn add log4js
# or
pnpm i log4js

// src/logger.ts
import log4js  from 'log4js'
log4js.configure({  
    appenders: {  
        fileout: { type: "file", filename: "fileout.log" }, 
        datafileout: {
            type: "dateFile", 
            filename: "mylog.log", 
            pattern: ".yyyy-MM-dd hh-mm-ss-SSS"
        },
        consoleout: { type: "console" }, 
    }, 
    categories: {    
        default: { appenders: ["fileout", "consoleout"], level: "debug" },   
        anything: { appenders: ["consoleout"], level: "debug" }
    }
});
export const logger = log4js.getLogger();

// src/app.ts
import Koa from 'koa';
import { logger } from './logger.ts
const port = 3000;
function bootstrap() {
  const app = new Koa();
  app.use(async (ctx, next) => {
    await next();
    ctx.response.type = 'text/html';
    ctx.response.body = '<h1>Hello, World!</h1>';
  });
  app.listen(port, ()=>{
    logger.debug(`app started at: http://localhost:${port}`);
  })
}
bootstrap()

{
  script:{
    // ...
    "start": "node ./dist/app.js",
  }
}

pnpm run start

{
  script:{
    // ...
    "ts:build": "gulp --require @esbuild-kit/cjs-loader",
  }
}

pnpm run ts:build

pnpm run start

{
  script:{
    "ts:build": "gulp --require @esbuild-kit/cjs-loader",
    "start": "node ./dist/app.js",
    "dev": "pnpm run ts:build && pnpm run start"
  }
}

npm i nodemon -D
# or
yarn add -D nodemon
# or
pnpm i nodemon -D

{
  //...
  script:{
    // ...
    "ts:build": "gulp --require @esbuild-kit/cjs-loader",
    "start": "node ./dist/app.js",
    "dev": "nodemon -e ts --watch src --exec \"pnpm run ts:build && pnpm run start\""
  }
}

pnpm run dev