全栈之路:node+ts+koa 开发环境搭建

4,332 阅读1分钟

入行前端一年多了,虽然对前端的热爱丝毫未减,但也逐渐对后端产生了xing趣(这可能就是渣猿吧~,啥都想学)。于是,我便利用工作的闲(摸)暇(鱼)时间,开始了我的全栈之路。

由于平常开发前端都是使用ts进行开发的,在开始之前,我先搭建了一个ts开发环境,以便后期可以爽撸代码~

话不多说,献上我的搭建流程吧~

  1. 需引入的第三方库

    yarn add typescript ts-node nodemon -D
    
    1. ts-node:对指定入口ts文件进行编译,并执行;
    2. nodemon:监听指定目录下文件的改动,当文件发生变动时重新启动程序;
  2. Typescript配置文件

    tsc --init
    

    初始化tsconfig.json,当ts编译时会根据里面的配置进行编译,基本配置如下:

    {
      "compilerOptions": {
        "target": "es5", /* 解析结果 */
        "module": "commonjs", /* 遵循的模块化规范 */
        "strict": true,
        "esModuleInterop": true, /* 支持以import xx from ‘xx’格式引入 */
        "skipLibCheck": true,/* 跳过声明文件的类型检查 */
        "forceConsistentCasingInFileNames": true /* 禁止对同一个文件的不一致的引用 */
      },
      "include": [
        "src/**/*"
      ],/* 指定需要编译的目录范围 */
      "exclude": ["node_modules"] /* 忽略类型检查的目录 */
    }
    

    更过详细的配置可以查看官网:www.tslang.cn/docs/handbo…

  3. package.json脚本

    "scripts": {
        "build": "tsc",
        "start": "tsc dist/index.ts",
        "dev": "nodemon --watch src -e ts,tsx --exec ts-node src/index.ts"
      }
    

    "dev":

    1. --watch src:监听src目录下文件变化;
    2. -e ts:只监听后缀为ts的文件;
    3. --exec:执行命令
  4. 引入koa

    yarn add koa
    

    启动一个简单服务

    import Koa from "koa";
    ​
    const app = new Koa();
    ​
    app.use(async (ctx) => {
      ctx.body = "Hello World";
    });
    ​
    app.listen(3000);
    

至此,一个简易的开发环境便搭建完成了。

\