工程化笔记

前端工程化相关，包括 ESLint、Rollup、Git 工作流等。

ESLint

基于 eslint-sets 的配置实践。

Flat Config (ESLint 9+)

// eslint.config.js
import eslintConfig from '@eslint-sets/eslint-config'

export default eslintConfig()

自定义配置

import eslintConfig from '@eslint-sets/eslint-config'

export default [
  ...eslintConfig(),
  {
    rules: {
      'no-console': 'warn',
      'no-debugger': 'error',
      '@typescript-eslint/no-explicit-any': 'warn'
    }
  },
  {
    ignores: ['dist/**', 'node_modules/**']
  }
]

Vitest 全局变量

使用 eslint-plugin-vitest-globals：

import vitestGlobals from 'eslint-plugin-vitest-globals'

export default [
  vitestGlobals.configs.recommended
]

ESLint 报告

使用 eslint-reporter 生成报告：

eslint-reporter --output report.xlsx

支持按作者分组，导出 Excel 报告。

Rollup

基础配置

// rollup.config.ts
import { defineConfig } from 'rollup'
import typescript from 'rollup-plugin-typescript2'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'

export default defineConfig({
  input: 'src/index.ts',
  output: [
    { file: 'dist/index.cjs', format: 'cjs' },
    { file: 'dist/index.mjs', format: 'esm' }
  ],
  plugins: [
    resolve(),
    commonjs(),
    typescript()
  ]
})

常用插件

rollup-plugin-add-banner

添加注释头部：

import banner from 'rollup-plugin-add-banner'

export default {
  plugins: [
    banner({
      banner: `/*! my-lib v${version} | MIT License */`
    })
  ]
}

rollup-plugin-replace-shebang

处理 CLI 工具的 shebang：

import shebang from 'rollup-plugin-replace-shebang'

export default {
  plugins: [shebang()]
}

rollup-plugin-require-css

CSS 导入支持：

import css from 'rollup-plugin-require-css'

export default {
  plugins: [
    css({
      modules: true
    })
  ]
}

多入口配置

export default [
  {
    input: 'src/index.ts',
    output: { file: 'dist/index.js', format: 'cjs' }
  },
  {
    input: 'src/cli.ts',
    output: { file: 'dist/cli.js', format: 'cjs', banner: '#!/usr/bin/env node' }
  }
]

Git 工作流

基于 gitmars。

安装

# npm
npm install -g gitmars

# pnpm
pnpm add -g gitmars

初始化

gitmars init

配置文件 .gitmarsrc：

{
  "master": "master",
  "develop": "develop",
  "release": "release",
  "bugfix": "bug",
  "feature": "feature",
  "support": "support"
}

常用命令

# 创建功能分支
gitmars start feature/my-feature

# 提交代码 (规范 commit message)
gitmars commit
# 选择类型: feat/fix/docs/style/refactor/test/chore

# 更新分支
gitmars update

# 完成功能
gitmars finish feature/my-feature

# 发布版本
gitmars release 1.0.0

# 修复 bug
gitmars start bugfix/issue-123
gitmars finish bugfix/issue-123

Commit 规范

类型	描述
feat	新功能
fix	修复 bug
docs	文档更新
style	代码格式
refactor	重构
test	测试
chore	构建/工具

Prettier

使用 prettier-config-common：

// prettier.config.js
export default {
  ...require('prettier-config-common'),
  // 自定义覆盖
  tabWidth: 2
}

脚手架

saqqdy-cli

saqqdy-cli 快速创建项目：

# 安装
npm install -g saqqdy-cli

# 创建项目
saqqdy create my-project

# 选择模板
# - vue3-ts
# - vue2-js
# - nuxt3
# - electron-vue3

自定义脚手架

import { prompt } from 'enquirer'
import { copy, writeJson } from 'fs-extra'

async function createProject() {
  const { name, template } = await prompt([
    { type: 'input', name: 'name', message: '项目名称' },
    { type: 'select', name: 'template', choices: ['vue3', 'react', 'nuxt3'] }
  ])
  
  await copy(`templates/${template}`, name)
  await writeJson(`${name}/package.json`, { name })
}

CI/CD

GitHub Actions

# .github/workflows/ci.yml
name: CI

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      
      - run: pnpm install
      - run: pnpm lint
      - run: pnpm test
      - run: pnpm build

相关项目

• gitmars - Git 工作流
• eslint-sets - ESLint 配置
• eslint-plugin-vitest-globals - Vitest 支持
• rollup-plugin-add-banner - Banner 插件
• rollup-plugin-replace-shebang - Shebang 插件
• saqqdy-cli - 项目脚手架