前端工程化工具链

包管理器

包管理器是前端开发的基础工具，用于管理项目依赖。

npm

npm 是 Node.js 自带的包管理器，也是最常用的前端包管理工具：

# 初始化项目
npm init -y

# 安装依赖
npm install <package-name>

# 安装开发依赖
npm install --save-dev <package-name>

# 运行脚本
npm run <script-name>

pnpm

pnpm 是一个快速、节省磁盘空间的包管理器：

# 安装 pnpm
npm install -g pnpm

# 初始化项目
pnpm init

# 安装依赖
pnpm add <package-name>

# 安装开发依赖
pnpm add -D <package-name>

构建工具

Vite

Vite 是新一代前端构建工具，具有极快的开发服务器启动速度：

# 创建项目
npm create vite@latest my-project -- --template vanilla

# 进入项目目录
cd my-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

Webpack

Webpack 是老牌的前端构建工具，功能强大且生态完善：

# 安装 webpack
npm install --save-dev webpack webpack-cli webpack-dev-server

# 基本配置 webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    static: './dist',
    hot: true,
  },
};

代码规范工具

ESLint

ESLint 是 JavaScript 的代码检查工具：

# 安装 ESLint
npm install --save-dev eslint

# 初始化配置
npx eslint --init

# 运行检查
npx eslint src/

# 自动修复
npx eslint src/ --fix

Prettier

Prettier 是代码格式化工具：

# 安装 Prettier
npm install --save-dev prettier

# 创建配置文件 .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

# 格式化代码
npx prettier --write src/

TypeScript

TypeScript 为 JavaScript 添加了类型系统：

# 安装 TypeScript
npm install --save-dev typescript

# 初始化配置
npx tsc --init

# 编译 TypeScript
npx tsc

# 监听模式
npx tsc --watch

测试工具

Jest

Jest 是流行的 JavaScript 测试框架：

# 安装 Jest
npm install --save-dev jest

# 运行测试
npx jest

# 监听模式
npx jest --watch

Vitest

Vitest 是 Vite 原生的测试框架：

# 安装 Vitest
npm install --save-dev vitest

# 运行测试
npx vitest

# 监听模式
npx vitest --watch

版本控制工具

Git

Git 是分布式版本控制系统：

# 初始化仓库
git init

# 添加文件
git add .

# 提交更改
git commit -m "feat: 初始化项目"

# 查看状态
git status

# 查看历史
git log --oneline

Husky

Husky 用于管理 Git hooks：

# 安装 Husky
npm install --save-dev husky

# 初始化
npx husky install

# 添加 pre-commit hook
npx husky add .husky/pre-commit "npm test"

推荐的项目配置

以下是一个推荐的前端项目配置：

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "vitest",
    "lint": "eslint src/",
    "format": "prettier --write src/"
  },
  "devDependencies": {
    "typescript": "^5.0.0",
    "vite": "^5.0.0",
    "vitest": "^1.0.0",
    "eslint": "^8.0.0",
    "prettier": "^3.0.0",
    "husky": "^8.0.0"
  }
}

总结

前端工程化工具链的选择应根据项目需求和团队习惯来决定。对于小型项目，可以简化配置；对于大型项目，则需要更完善的工具链支持。