跳到主要内容

node 项目配置

node 项目工具​

ts_node​

安装​
npm install --save-dev ts-node
作用​
  • 直接运行 ts 文件；
语法格式​
npx ts-node test.ts

nodemon​

安装​
npm install --save-dev nodemon
作用​
  • 监视 node.js 应用程序中的任何更改并自动重启服务；
语法格式​
{
  "scripts": {
    "start": "nodemon src/index.ts"
  }
}

monorepo 配置​

目录结构​

目录结构​
  • .husky：husky 配置文件夹；
  • config：配置文件夹；
  • doc：文档；
  • package：项目文件夹；
  • .eslintignore：eslint 配置文件；
  • .gitignore：git 配置文件；
  • commitlint.config.js：commitlint 配置文件；
  • LICENSE：证书；
  • package.json：pnpm 配置文件；
  • pnpm-workspace.yaml：pnpm 配置文件；
  • README.md：顾名思义；

pnpm​

package.json​
  • 执行下述命令；
  • 根据需求修改配置；
pnpm init
工作空间​
  • 根目录创建 pnpm-workspace.yaml；
  • 输入下述内容；
packages:
  # all packages in direct subdirs of package/
  - "package/*"
  - "config/*"

安装公用依赖库​

公用依赖库​
  • commitlint；
  • Jest 相关；
  • eslint；
  • husky；
  • lint-staged；
  • typescript；

eslint 配置​

目录结构​

目录结构​
  • index.js：eslint 配置；
  • package.json：子项目 pnpm 配置；

node​

安装相关依赖库​
  • eslint-plugin-。。。；
配置文件​
  • 详见 github；
package.json​
  • 修改 main 为 index.js；
  • 修改 name 名称；

react​

安装相关依赖库​
  • eslint-plugin-。。。；
配置文件​
  • 详见 github；
package.json​
  • 修改 main 为 index.js；
  • 修改 name 名称；

typescript 配置​

目录结构​

目录结构​
  • tsconfig.json：typescript 配置；
  • package.json：子项目 pnpm 配置；

node​

tsconfig.json​
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "outDir": "dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noUnusedLocals": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true
  },
  "exclude": ["**/test.ts"],
  "ts-node": {
    "esm": true,
    "experimentalSpecifierResolution": "node"
  }
}
package.json​
  • 修改 main 为 tsconfig.json；
  • 修改 name 名称；

react​

package.json​
  • 修改 main 为 tsconfig.json；
  • 修改 name 名称；
tsconfig​
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "exclude": ["**/test.ts"]
}

jest 配置​

目录结构​

目录结构​
  • index.js：jest 配置；
  • package.json：子项目 pnpm 配置；

node​

package.json​
  • 修改 main 为 index.js；
  • 修改 name 名称；
index.js​
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  verbose: true,
  preset: "ts-jest",
  testEnvironment: "node",
  transform: {
    "^.+\\.ts?$": [
      "ts-jest",
      {
        isolatedModules: true,
        diagnostics: false,
      },
    ],
  },
};

react​

package.json​
  • 修改 main 为 index.js；
  • 修改 name 名称；
index.js​
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  verbose: true,
  preset: "ts-jest",
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.ts?$": [
      "ts-jest",
      {
        isolatedModules: true,
        diagnostics: false,
      },
    ],
  },
};

node 模板​

目录结构​
  • src；
  • .eslintrc.cjs；
  • package.json；
  • tsconfig.json；
  • jest.config.js；
导入配置​
pnpm add config-eslint-ts-node config-ts-node config-jest-ts-node --save --filter project-name
使用配置​
// .eslintrc.cjs
// eslint-disable-next-line no-undef
module.exports = require("@kxh/config-eslint-ts-node");

// tsconfig.json
{
  "extends": "@kxh/config-ts-node",
  "include": ["src"]
}

// jest.config.cjs
module.exports = require("@kxh/config-jest-ts-react");
安装私有依赖库​
  • 自定义；

express 模板​

目录结构​
  • src；
  • public；
  • prisma；
  • .eslintrc.cjs；
  • package.json；
  • tsconfig.json；
  • jest.config.js；
导入配置​
pnpm add config-eslint-ts-node config-ts-node config-jest-ts-node --save --filter project-name
使用配置​
// .eslintrc.cjs
// eslint-disable-next-line no-undef
module.exports = require("@kxh/config-eslint-ts-node");

// tsconfig.json
{
  "extends": "@kxh/config-ts-node",
  "include": ["src"]
}

// jest.config.cjs
module.exports = require("@kxh/config-jest-ts-react");
安装私有依赖库​
  • fastify 相关；
  • prsima；
  • pm2；
  • zod；
  • ts-node；
  • nodemon；
package.json​
  • 详见 github；
    • 注意 pm2 相关命令；

vite + react 模板​

目录结构​
  • src；
  • .eslintrc.cjs；
  • package.json；
  • tsconfig.json；
  • tsconfig.node.json；
  • vite.config.ts；
  • index.html；
  • jest.config.js；
导入配置​
pnpm add config-eslint-ts-react config-ts-react config-jest-ts-node --save --filter project-name
使用配置​
  • 使用 vite cli 创建 vite-react 模板；
  • 修改 tsconfig.json；
    • config-ts-react 即根据 vite 模板创建；
// .eslintrc.cjs
// eslint-disable-next-line no-undef
module.exports = require("@kxh/config-eslint-ts-react");

// tsconfig.json
{
  "extends": "@kxh/config-ts-vite-react",
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

// jest.config.cjs
module.exports = require("@kxh/config-jest-ts-react");
安装私有依赖库​
  • vite swc 插件；
  • zod；
  • zustand；
  • styled-component；
  • react-router-dom；
  • immer；
  • antd；
  • axios；
package.json​
  • 详见 github；

配置 husky + commitlint + lint-staged​

[[010_husky教程]] [[030_commitlint教程]] [[020_lint-staged教程]]