前端技能

前端技能树

基建篇

tsconfig

{
    "compilerOptions": {
        "target": "ES6",//编译后的javascript版本
        "module": "commonjs",//生成的模块系统类型，commonjs、amd、umd、esnext
        "outDir": "./dist",//指定编译输出的目录
        "rootDir": "./src",//指定输入文件的根目录
        "strict": true,//启用所有严格类型模式
        "esModuleInterop": true,//支持 CommonJS 和 ES 模块之间的互操作性
        "skipLibCheck": true,//跳过.d.ts ，有助于加快编译速度
        "forceConsistentCasingInFileNames": true,//强制文件大小写一致
        "declaration": true,//生成.d.ts文件
        "declarationDir": "./dist/types",//指定生成.d.ts文件路径
        "experimentalDecorators":true, //实验性的ES装饰器
        ”jsx“:"React",//在.tsx文件里支持jsx,
        "moduleResolution":"Node" | "Classic",//如何处理模块
        ”sourceMap:true,//生成相应的.map文件
        "noImplicitReturns":true,//不是所有路径函数都有返回值，是否报错
        “noUnusedLocals”:true,//若有未使用的局部变量则抛错
        "importHelpers":true,//从 tslib 导入辅助工具函数（比如 __extends， __rest等）
        "baseUrl":".",
        "paths":{
            "@":["./src"] //设置映射，基于baseUrl
        }
    },
    "include": ["src/**/*.ts"],//指定需要编译的文件或目录
    "exclude": ["node_modules", "dist"]//指定需要排除的文件或目录
}

npm package

创建npm package 并发布

mkdir my-package
cd my-package
npm init
//配置.npmignore文件
npm pack //本地打包，其他通过npm install package-name 测试这个包
npm login //登录npm账号，npm config set registry https://registry.npmjs.org/
//添加文档READ.md 安装方式,使用示例,API文档,贡献指南,许可证信息
npm publish 

{
  "name": "storage-pac",
  "version": "1.0.0",
  "description": "this is a storage util",
  "main": "dist/index.js",
  "types": "dist/types/index.d.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc"
  },
  "author": "lv.xing",
  "license": "MIT",
  "devDependencies": {
    "typescript": "^5.8.3"
  }
}

eslint

npx eslint --init
npx eslint your-file.js
npx eslint your-file.js --fix

git husky

# 使用 npm
npm install husky --save-dev

# 初始化 Husky（自动创建 .husky 目录）
npx husky init
# 编写commit-msg规则

#!/usr/bin/env sh
# 提交信息类型列表
types='^(feat|fix|docs|style|refactor|test|chore|perf|build|ci|revert):'

# 检查提交信息文件是否存在
if [ ! -f "$1" ]; then
  echo "ERROR: 提交信息文件不存在！"
  exit 1
fi

# 读取提交信息文件，并去除多余空格和换行符
message=$(cat "$1" | sed -e 's/^[[:space:]]*//' -e 's/[[:space:]]*$//')

# 正则匹配校验
if ! echo "$message" | grep -qE "$types"; then
  echo "ERROR: 提交信息不符合规范！"
  echo "正确格式: <类型>: <描述>"
  echo "允许的类型: feat, fix, docs, style, refactor, test, chore, perf, build, ci, revert"
  echo "示例: feat: 完成一个登录页面的开发"
  echo "示例: feat: 完成一个登录页面的开发 [PMHZ-319]"
  exit 1
fi

echo "提交信息符合规范。"

vite

npm create vite@latest app-name --template vue | react

配置智能提示vite.config.js

/**@type {import('vite').UserConfig} */