项目工程化-Commitizen
Commitizen?一个工具,用于规范代码提交信息的工具。cz-conventional-changelog 是一个 Commitizen 的适配器,用于适配 conventional-changelog 的提交规范。 为什么要介绍这么一个工具：当你在提交commit的时候，肯定会手动输入一些type: fix(axios): 修复axios请求失败的问题 #1 但是现在有这么一个工具，只需要根据自己的情况选择对应的条件就好了； 如何使用？这里可以安装到全局,也可以安装到项目中,这里推荐安装到项目中,因为这样可以避免不同项目使用不同的 Commitizen 版本,导致提交信息不一致的问题。 ::: tip官方模板:cz-conventional-changelog, 特点是免配置,开箱即用,但提示全部为英文,不太友好 自定义模板:cz-customizable, 特点是可以自定义添加 emoji 表情,可以自定义提示语言,但需要配置,且无法自定义提交类型(scope) linpengteng:cz-message-helper 修改版,特点是可以自定义 emoji...
项目工程化-Browserslist
Browserslist什么是 Browserslist 这个文件指定了项目的浏览器兼容性目标，用于指导自动化工具（如Autoprefixer或Babel）如何处理CSS和JavaScript，确保代码在指定的浏览器版本中正常工作。 由于各种浏览器对 ECMAScript 和 CSS 的支持程度不同，因此开发者需要根据使用场景，为 Web 应用设置正确的浏览器范围。 Browserslist 可以指定 Web 应用能够在哪些浏览器中正常运行，它提供了统一的配置格式，并且已经成为了前端社区中的标准。Browserslist 被 SWC, Lightning CSS, Babel, ESLint, PostCSS 和 webpack 等库所使用。 Browserslist 文件是什么样子的12345678910[production]chrome >= 87edge >= 88firefox >= 78safari >= 14[development]last 1 chrome versionlast 1 firefox versionlast 1...
项目工程化-env配置
Envenv代表环境，不论是在前端还是后端开发，都有不同的环境，每个环境对应的一些配置都是不同的，例如：请求的地址，一些加密的字符等等； 通常在node中会获取环境变量process.env.NODE_ENV等等； 这样的一个好处就是：在前端项目本地开发对应本地的配置环境，而打包对应着生产环境，俩个环境独立且分开，不会造成其中的冲突。 文件是什么样子？123456789101112131415# vite 中使用需要带有VITE_APP前缀VITE_APP_BASE_URL = '/'# webpack 中使用。需要带有VUE_APP前缀VUE_APP_BASE_URL = ''# rsbuid中使用 分为俩种情况：#一种是rsbuild.config.ts读取，#一种是客户端读取,vue文件中可以读取# rsbuild,config.ts读取, 没有前缀，可以自定义APP_MODE='dev'APP_NAME='app'#...
项目工程化-EditorConfig
Editor Config什么是EditorConfig EditorConfig 有助于为在不同编辑器和 IDE 中处理同一项目的多个开发人员维护一致的编码风格 EditorConfig 项目由一个用于定义编码样式的文件格式和一组文本编辑器插件组成，这些插件使编辑器能够读取文件格式并遵守定义的样式 EditorConfig 文件很容易阅读，并且可以很好地与版本控制系统配合使用 EditorConfig 文件是什么样子的123456789101112root = true[*]charset = utf-8end_of_line = lfindent_size = 2indent_style = spaceinsert_final_newline = truetrim_trailing_whitespace = true[*.md]trim_trailing_whitespace = false 属性配置文档 indent_style缩进样式; 这些值不区分大小写。核心库将它们转换为小写。可以选择： tab space indent_size缩进大小（以单间距字符为单位）...
项目工程化-git配置
.gitignore 和 .gitattributes都是为git提交需要配置的一些信息，例如某些文件不需要提交，提交的格式是什么等等; .gitignore: 文件是一个纯文本文件，包含了项目中所有指定的文件和文件夹的列表，这些文件和文件夹是 Git 应该忽略和不追踪的。 在 .gitignore 中，你可以通过提及特定文件或文件夹的名称或模式来告诉 Git 只忽略一个文件或一个文件夹。 你也可以用同样的方法告诉 Git 忽略多个文件或文件夹。 .gitattributes: 文件是一个用来配置 Git 版本控制系统的文件，文件允许你对 Git 中的文件和操作进行更精细的控制和配置，以适应项目的特定需求和工作流程。这可以提高代码管理的灵活性和效率。详细说明 文件是什么样子的?.gitignore1234567891011121314# .gitignore# Local.DS_Store*.local*.log*# Distnode_modulesdist/#...
项目工程化-eslint
eslintESLint 是一个可配置的 JavaScript linter。它可以帮助您发现并修复 JavaScript 代码中的问题。问题可以是任何问题，从潜在的运行时错误，到不遵循最佳实践，再到样式问题 配置文件配置文件的名字有很多，版本的不同会导致不同的导出语法： 首先说明文件名的变动 8.x 版本 module.exports = {} .eslintrc.js .eslintrc.cjs .eslintrc.yaml .eslintrc.yml .eslintrc.json 9.x 版本 export default [] eslint.config.js eslint.config.mjs eslint.config.cjs 8.x 版本配置12345678910111213141516171819202122232425262728293031// .eslintrc.jsmodule.exports = { // 配置根目录 root: true, // 配置环境,支持的环境 env:...
项目工程化-release-it
release-it?是一个用于自动化软件发布的命令行工具。它可以帮助开发团队自动化版本控制、生成更新日志（CHANGELOG）、创建 Git 标签、发布到 npm 等任务。 主要功能 自动版本号递增 (遵循语义化版本规范 Semantic Versioning) 自动生成/更新 CHANGELOG Git 提交、打标签和推送 发布到 npm 仓库 支持 hooks 来执行自定义脚本 支持插件扩展功能 基本使用1. 安装:1npm install --save-dev release-it 2.添加发布脚本到 package.json:12345{ "scripts": { "release": "release-it" }} 3. 运行发布:可以在项目根目录创建 .release-it.json...
项目工程化-husky
huskyHusky 作为一个强大的Git钩子管理器，通过自动化代码质量检查和测试流程，极大地提升了软件开发团队的工作效率和代码质量。 通过合理配置，它能够帮助开发者在提交代码之前发现并修正潜在的问题，从而减少后续的修复成本和沟通成本。 在项目中，经常使用husky + lint-staged再提交代码之前做一系列代码格式操作，因为项目中安装的eslint + stylelint + perttier有可能会出现如果代码没有进行格式化，那么在钩子管理器中检测执行对应的格式化命令；这样保证代码的规范性； 安装对应的依赖1pnpm add -D husky lint-staged @commitlint/cli @commitlint/config-conventional husky: Git hooks 工具，对git执行的一些命令，通过对应的hooks钩子触发，执行自定义的脚本程序 lint-staged: 检测文件插件，只检测git add ....
项目工程化-stylelint
stylelintstylelint 是一个用于检测 CSS 代码风格和错误的工具，它有点类似于 ESlint，但是它专注于 CSS。 stylelint 不仅可以帮助你在团队中保持一致的 CSS 代码风格，发现潜在的错误，并且确保代码符合最佳实践。 Stylelint 需要一个配置对象，并在以下位置寻找一个配置： stylelint.config.js 或.stylelintrc.js 文件使用哪个模块系统取决于 Node.js 的默认模块系统配置（例如"type":"module"在 package.json）。 stylelint.config.mjs 或.stylelintrc.mjs 使用文件 export default（ES 模块） stylelint.config.cjs 或使用(CommonJS) 的.stylelintrc.cjs 文件 module.exports .stylelintrc.json、.stylelintrc.yml 或.stylelintrc.yaml 文件 配置相关资料-stylelint...
webpack和vite的区别?
区别?在使用vite之前，项目基本都是使用的webpack, 但是针对于wite和webpack的区别如下： 开发模式 webpack 在开发过程中，它首先需要完全构建整个项目，生成一个或多个 bundle，然后通过热模块替换（HMR）来更新变化的部分。 vite Vite 使用原生 ES 模块和即时编译，允许在不完整构建的情况下直接加载源代码，提供更快的初始启动时间和按需编译。 启动速度 webpack启动时是需要先编译整个项目，小型项目还好但是对于大型项目，编译时间会比较长; vite 是预构建和按需编译 但是在启动速度上优于webpack。 打包效率 webpack 提供丰富的插件与加载器生态系统，可以处理复杂的构建需求，但是这也是缺点，因为需要更多的配置和依赖。一定程度上导致较长的打包时间 vite 使用esbuild进行打包，esbuild 是一个快速、小巧的 JavaScript 构建工具，可以快速构建项目，并且可以支持 TypeScript、Vue、React 等。但是在对项目的高级优化与定制化方面没有webpack强大 底层实现 webpack...