【ying-template】快速入门指南

【ying-template】快速入门指南

ying-template 这是一个基于 `webpack@^5.27.2` + `typescript@^4.2.3` + `esbuild-loader@^3.0.1` + `jest@^26.6.3` + `eslint@^7.22.0` 的多页面脚手架。 项目地址: https://gitcode.com/gh_mirrors/yi/ying-template

项目简介

ying-template 是一个高度可定制化的多页面应用脚手架，它集合了现代前端开发所需的主流技术栈，包括 Webpack 5.27.2, TypeScript 4.2.3, esbuild-loader 3.0.1, Jest 26.6.3, 和 ESLint 7.22.0。该模板旨在加速开发过程，提供一套完整的开箱即用解决方案，涵盖环境搭建、代码规范、自动化测试和部署准备。

一、项目目录结构及介绍

├── browserslistrc        # 浏览器兼容性配置
├── cz-config.js          # Commitizen配置文件
├── editorconfig         # 编辑器配置文件
├── env                  # 环境变量配置
├── eslintignore         # ESLint忽略文件列表
├── eslintrc             # ESLint配置文件
├── gitignore             # Git忽略文件列表
├── prettierignore       # Prettier忽略格式化文件列表
├── prettierrc           # Prettier格式化规则配置
├── stylelintignore      # StyleLint忽略规则文件
├── stylelintrc          # StyleLint配置文件
├── Dockerfile            # Docker配置文件
├── LICENSE               # 许可证文件
├── README.md             # 项目说明文档
├── commitlint.config.js  # CommitLint配置，确保提交信息规范
├── default.conf          # Nginx基础配置
├── docker-compose.yml   # Docker Compose配置，用于多容器管理
├── fileMock.js           # Jest测试模拟文件
├── jest.config.js        # Jest测试配置
├── nginx.conf            # 运行环境的Nginx配置文件
├── package.json          # 项目依赖和脚本命令
├── postcss.config.js     # PostCSS配置，增强CSS处理能力
├── tsconfig.json         # TypeScript编译配置
├── yarn.lock             # Yarn依赖锁定文件
├── views                 # 页面文件夹
├── tests                 # 测试文件夹
├── static                # 静态资源文件夹
├── src                   # 主要源代码
│   ├── ...
├── dist                  # 构建输出目录
├── coverage              # 单元测试覆盖率报告目录
├── config                # 核心配置文件夹，包含：
│   ├── config.js         # 根配置
│   ├── dev-server.js     # 开发环境服务器配置
│   ├── webpack.config.base.js    # Webpack基础配置
│   ├── webpack.config.dev.js     # 开发环境Webpack配置
│   └── webpack.config.prod.js    # 生产环境Webpack配置
└── husky                 # Git钩子管理工具配置，包含代码格式检查等

二、项目的启动文件介绍

• 主入口: 应用通常从 src 目录下的特定入口文件开始（如 index.tsx 或指定的 .js/.tsx 文件），但这在具体项目中需查看实际配置。
• 开发服务启动: 通过执行 yarn dev，将启动开发服务器。这通常是基于Webpack的热重载开发环境。
• 生产构建: 执行 yarn build 将依据 webpack.config.prod.js 进行生产环境的打包。

三、项目的配置文件介绍

Webpack配置（webpack.config.*.js）

• base: 提供通用配置，适用于所有环境。
• dev: 针对开发环境的配置，通常开启Source Map，HMR（Hot Module Replacement）等功能。
• prod: 生产环境配置，侧重于最小化文件大小，优化加载速度等。

TypeScript配置（tsconfig.json）

配置TypeScript编译选项，比如目标ES版本、模块系统等，支持typescript@4.2.3。

ESLint配置(eslintrc)

定义JavaScript和TypeScript的编码风格和规则，保证代码质量的一致性和规范性。

Prettier配置(prettierrc)

负责代码格式化，自动化调整代码风格，提高代码可读性，遵循特定的缩进、换行、引号等规则。

Jest配置(jest.config.js)

定义单元测试的运行规则，包括测试文件匹配模式、预处理器设置等，以jest@^26.6.3为基准。

以上内容仅为概览，详细配置和使用方法应参照具体文件注释和项目文档进行深入理解与应用。在实际操作过程中，依据项目需求调整相关配置，确保项目的高效运行。

ying-template 这是一个基于 `webpack@^5.27.2` + `typescript@^4.2.3` + `esbuild-loader@^3.0.1` + `jest@^26.6.3` + `eslint@^7.22.0` 的多页面脚手架。 项目地址: https://gitcode.com/gh_mirrors/yi/ying-template