前端笔记本注重什么文件

前端开发笔记本主要关注以下文件和配置，这些内容直接影响开发效率、协作规范与部署质量：

1. 项目配置文件

`package.json`

核心的依赖管理文件，定义项目名称、版本、运行脚本、生产/开发环境依赖。注意区分`dependencies`与`devDependencies`，避免依赖冗余或版本冲突。扩展工具如`npm-check-updates`可帮助更新依赖。

`vite.config.js` / `webpack.config.js`

构建工具配置，需优化打包策略（如代码分割、Tree Shaking）、配置别名（alias）、代理服务器（proxy）等。Webpack的`loader`和`plugin`机制需熟练掌握。

`.babelrc` / `babel.config.js`

Babel配置，支持现代JavaScript语法转译，可搭配`@babel/preset-env`按目标浏览器自动降级代码。

2. 代码规范与质量

`.eslintrc.js`

ESLint规则文件，强制统一代码风格（如引号、缩进），推荐使用`eslint-config-airbnb`等流行规范。结合`.eslintignore`忽略无需检查的文件。

`.prettierrc`

格式化配置，与ESLint配合时需安装`eslint-config-prettier`避免规则冲突。可设定单引号、尾逗号等细节。

`.stylelintrc`

CSS/LESS/Sass规范检查，避免选择器嵌套过深或重复样式，支持自动修复。

3. 环境与部署

`.env` / `.env.development`

环境变量文件，区分开发、测试、生产环境的API地址或密钥。敏感变量需加入`.gitignore`。

`Dockerfile`

容器化部署时定义镜像构建步骤，如多阶段构建优化镜像体积。

`.nginx.conf`

生产环境Nginx配置，涉及静态资源缓存、Gzip压缩、HTTPS重定向等优化项。

4. 文档与协作

`README.md`

项目说明文档，需包含快速启动、目录结构、环境要求、常见问题等。良好的文档能降低协作成本。

`CHANGELOG.md`

版本更新日志，遵循语义化版本（SemVer），记录新增功能、修复及破坏性变更。

`.gitignore`

忽略`node_modules`、构建产物、日志等文件，避免无关内容进入版本库。

5. 自动化与测试

`.github/workflows/ci.yml`

GitHub Actions配置文件，实现自动化测试、代码扫描、部署流水线。

`jest.config.js`

单元测试配置，支持覆盖率阈值（coverageThreshold）和模拟（mock）设置。

`cypress.json`

E2E测试工具Cypress的配置，定义基础URL、视窗尺寸等。

6. 其他关键文件

`tsconfig.json`

TypeScript项目配置，严格模式（`strict: true`）和路径映射（`paths`）提升类型安全。

`.editorconfig`

跨编辑器统一基础格式（如换行符、缩进），适配不同团队成员的开发环境。

`mock/`目录

存放本地Mock数据，使用`Mock.js`或`JSON Server`模拟接口，独立于后端开发。

扩展知识：

Monorepo管理：大型项目可用`pnpm workspace`或`lerna`管理多包，共享通用配置。

性能分析工具：Webpack的`BundleAnalyzerPlugin`分析打包体积，优化加载速度。

CLI工具链：自定义脚手架（如`plop`）可快速生成组件模板，统一项目结构。

前端开发的成功往往依赖于对这些文件的精细化管理和持续优化，尤其在工程化程度高的项目中，配置的合理性直接影响可维护性与扩展性。