002 vue3-admin项目的目录及文件说明之.gitignore文件

.gitignore 文件是 Git 版本控制系统中非常重要的配置文件，用于指定哪些文件或目录应该被 Git 忽略，不纳入版本控制。

基本概念

作用

• 告诉 Git 哪些文件不需要追踪
• 避免将不必要的文件提交到代码仓库
• 保持仓库清洁，减小仓库体积

工作原理

• Git 会读取.gitignore 文件中的规则
• 匹配到的文件将不会出现在git status中
• 不会被git add命令添加到暂存区

常见的前端.gitignore 配置

# 依赖目录
node_modules/
jspm_packages/
typings/
.pnp/
.pnp.js

# 测试目录
coverage/
tests/unit/coverage/
tests/e2e/reports/

# 构建输出目录
dist/
build/
out/
release/
deploy/

# 日志文件
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# 编辑器配置文件
.idea/
.vscode/
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

# 操作系统文件
.DS_Store
Thumbs.db

# 环境变量文件
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# 缓存文件
.cache/
.eslintcache
.stylelintcache
.tmp
.temp

# IDE特定文件
*.sublime-project
*.sublime-workspace
*.idea/
*.vscode/
*.atom/

# 其他
*.log
*.gz
*.zip
*.tar
*.rar
*.bak

模式匹配规则

基本语法

# 注释行，以#开头
*.log              # 匹配所有.log文件
build/             # 匹配build目录及其所有内容
src/**/*.js        # 匹配src目录下所有子目录中的.js文件
!package.json      # 否定匹配，不忽略package.json

常用模式

# 匹配所有.js文件
*.js

# 匹配所有.css文件
*.css

# 匹配所有.map文件
*.map

# 匹配特定目录下的所有文件
dist/*

# 匹配目录及其子目录
node_modules/**/*

# 匹配特定文件
.env.local

最佳实践

1. 使用模板

# 使用GitHub提供的模板
npx gitignore node

npx gitignore node 是一个非常实用的命令，用于快速生成针对 Node.js 项目的专业.gitignore 文件

• npx: Node.js 包运行器，无需全局安装即可运行命令
• gitignore: 这是一个 npm 包，提供了生成.gitignore 文件的功能
• node: 指定要生成的.gitignore 模板类型

原理：

1. 该命令会从 GitHub 的官方.gitignore 模板库获取最新的 Node.js 模板
2. 在当前目录生成一个.gitignore文件
3. 包含了 Node.js 项目常见的需要忽略的文件和目录

项目初始化：

mkdir my-project
cd my-project
npm init -y
npx gitignore node  # 生成.gitignore
git init
git add .
git commit -m "Initial commit

 

2. 分环境配置

# 通用忽略规则
node_modules/
dist/

# 开发环境特定
.env.development.local
.env.test.local

# 生产环境特定
.env.production.local

3. 保持.gitignore 更新

• 定期检查并更新.gitignore
• 当添加新的依赖或工具时，及时添加相应的忽略规则

4. 不要忽略必要的配置文件

# 不要忽略这些重要文件
!package.json
!package-lock.json
!yarn.lock
!.eslintrc.js
!.prettierrc.js

 

常见问题解决

Q: 已经提交的文件如何忽略？

# 先从Git中移除
git rm --cached filename

# 然后添加到.gitignore
echo "filename" >> .gitignore

# 提交更改
git commit -m "Ignore filename"

Q: 如何忽略已经跟踪的目录？

git rm -r --cached node_modules
echo "node_modules/" >> .gitignore
git commit -m "Ignore node_modules"

Q: 如何查看.gitignore 的生效情况？

# 检查特定文件是否被忽略
git check-ignore -v filename

# 列出所有被忽略的文件
git ls-files --others -i --exclude-standard