nodejs 使用ts 并且完成项目打包

最新推荐文章于 2024-08-09 08:01:34 发布

鲤小圈

最新推荐文章于 2024-08-09 08:01:34 发布

阅读量1.1k

点赞数

分类专栏： nodejs开篇论文章标签： javascript node.js 前端 typescript

本文链接：https://blog.csdn.net/liyu_ya/article/details/134476764

版权

nodejs开篇论专栏收录该内容

2 篇文章 0 订阅

订阅专栏

项目地址https://download.csdn.net/download/liyu_ya/88554646

这里我就用express来完成这个搭建

初始化

npx tsc --init

下载所需要的依赖

yarn add @types/express  @types/node ts-node typescript nodemon cpx ip rimraf express ejs

接下来配置tsconfig.json

{
  /* 根选项 */
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.ejs", "src/**/*.js"], // 指定被编译文件所在的目录
  "exclude": ["node_modules"], // 指定不需要被编译的目录
  "compilerOptions": {
    "target": "ES6", // 目标语言的版本
    "module": "commonjs", // 生成代码的模板标准
    "allowJs": true, // 允许编译器编译JS，JSX文件
    "checkJs": true, // 允许在JS文件中报错，通常与allowJS一起使用
    "esModuleInterop": true, // 允许export=导出，由import from 导入
    "forceConsistentCasingInFileNames": true, //是否区分文件系统大小写规则
    "strict": true, //是否启动所有严格检查的总开关，默认：false，启动后将开启所有的严格检查选项。
    "rootDir": "./", // 指定输出文件目录(用于输出)，用于控制输出目录结构
    "outDir": "dist", // 指定输出目录
    "alwaysStrict": true, // 在代码中注入'use strict'
    "noUnusedLocals": true //是否检查未使用的局部变量

  }
}

项目结构

dist 为打包结果

src /app.ts

import express from "express";
import userRouter from "./container/user";
import welcomeRouter from "./container/welcome";
import path from "path";
import config from "./config/config";
const app = express();

// config
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
//  static

app.use(express.static(path.resolve(__dirname, "../public")));

//  router
app.use(userRouter);
app.use(welcomeRouter);
app.get("/", config.staticHTML);

// app.listen(8888);
app.listen(config.port, config.run);

src/config 配置

src/config/config.ts 配置文件

import defineConfig from "./utils";
/**
 *  项目默认配置
 *  @param {Number} config.port 端口
 *  @param {Function} config.run 项目启动后执行
 *  @param {Function} config.title 欢迎页标题
 *  @param {Function} config.content 欢迎页内容
 */

export default defineConfig({
  port: 8888,
});

src/config/utils.ts 配置工具

import ip from "ip";
import fs from "fs";
import ejs from "ejs";
import path from "path";

/**
 *  项目默认配置
 *  @param {Number} config.port 端口
 *  @param {Function} config.run 项目启动后执行
 *  @param {Function} config.title 欢迎页标题
 *  @param {Function} config.content 欢迎页内容
 */

function defineConfig(config: {
  port: any;
  run?: any;
  title?: any;
  content?: any;
}): {
  port: number;
  run: any;
  staticHTML: any;
} {
  const {
    port = 3000,
    run: running,
    title = "welcome",
    content = "welcome use create-app-express-js",
  } = config;

  const run = (app: any) => {
    if (typeof running == "function") {
      running(app);
    }
    console.log();
    console.log();
    console.log("running app");
    console.log("server " + "http://" + ip.address() + ":" + (port || 3000));
  };
  const staticHTML = async (
    req: any,
    res: { send: (arg0: string & Promise<string>) => void }
  ) => {
    const templateFile = await fs.readFileSync(
      path.join(__dirname, `../../public//index.ejs`),
      "utf-8"
    );
    const html: any = await ejs.render(templateFile, {
      content,
      title,
    });
    res.send(html);
  };
  return {
    port,
    run,
    staticHTML,
  };
}

export default defineConfig;

src/container/ 路由配置

src/container/welcome.ts

import express from "express";

const welcomeRouter = express.Router();

welcomeRouter.get("/welcome", (req, res) => {
    res.send("welcome use create-app-express-js！")
})


export default welcomeRouter;

src/container/user.ts

import express from "express";

const userRouter = express.Router();
userRouter.get("/user/list", (req, res) => {
  res.send("欢迎使用create-app-express-js！");
});

export default userRouter;

public/index.ejs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <%= title %>
    </title>
    <style>
        * {
            font-size: 36px;
            text-align: center;
            line-height: 100vh;
        }
    </style>
</head>

<body>
    <%= content %>
</body>

</html>

package.json

{
  "name": "app",
  "version": "1.0.4",
  "main": "src/app.js",
  "license": "MIT",
  "scripts": {
    "dev": "nodemon src/app.ts",
    "build": "rimraf ./dist && cpx ./package.json ./dist && cpx ./public/* ./dist/public && tsc",
    "test": "nodemon dist/src/app.js"
  },
  "dependencies": {
    "@types/express": "^4.17.21",
    "@types/node": "^20.9.2",
    "cpx": "^1.5.0",
    "ejs": "^3.1.9",
    "express": "^4.18.2",
    "ip": "^1.1.8",
    "rimraf": "^5.0.5",
    "ts-node": "^10.9.1",
    "typescript": "^5.2.2"
  },
  "devDependencies": {
    "nodemon": "^3.0.1"
  }
}