当前位置: 首页 > Web前端 > HTML5

快来利用Github的这个功能,制作一个你满意的项目模板

时间:2023-04-05 20:14:03 HTML5

我承认我真的想不出更好的标题,因为本文涉及的内容比较广泛。但我保证这篇文章会尽可能有效。不仅是创建项目模板,写项目时需要考虑的事情也适合这篇文章。本文将主要讲以下内容:Github的模板仓库功能开源项目(模板)需要考虑的9大工程要素创建项目(模板)时提高效率的一些技巧大家也可以参考我之前写的一个模板仓库阅读过程samples,如果有常用TypeScript和VSCode的读者,吃起来会更好。目录背景如何满足TypeScriptTips编码规范Tips测试框架TipsCommit规范CI/CD文档CHANGELOGprotocol.github目录基于模板仓库创建新项目设置仓库为模板仓库使用模板仓库后期工作交流背景开源社区有很多工具可以帮助开发或者快速生成个人项目,但是有时候你可能会遇到存在以下问题:工具生成的工程过于复杂,很多东西是不必要的。生成过程中设置的问题很多,每次都要回答很繁琐。生成项目后,还需要修改,添加一些自己喜欢的内容,找不到完全适合自己的模板。也许你自己从头开发过脚手架,或者基于Yeoman之类的工具,但其实Github的创建模板仓库的功能就可以满足了。你的申请。此功能适用于满足以下条件的项目模板:项目模板是完全自定义的,不是通用的。这意味着无法像CLI工具那样通过设置问题来替换模板中的相应内容,从而让不同喜好的人也可以通过选择生成自己想要的项目。所以,如果你经常创建个人项目,并且每次的结构都与前几次类似,那么用这种方式创建自己的模板会更容易。如何做到满意在说Github的模板仓库的功能之前,先说说创建模板仓库需要考虑哪些问题,这样这个仓库才能让你满意。毕竟您需要从头开始创建一个存储库,使其成为Github上的模板存储库。一般来说,开发人员总是会对他们的项目感到满意,即使他们后来学习新知识并发现它很糟糕。这是因为你在创建项目时所做的已经达到了你现有的水平,这让你有一种满足感。因此,我们在构建项目时,应该通过比较当时一些知名的开源项目来构建满意度,而不是基于我们现在的水平。他们的身高更高,更难产生满足的情绪。但是一旦你满意了,你的项目的高度就会上升。接下来,我将列出开源项目中需要考虑的9个工程元素,并给出一些在创建项目模板时快速实现工程目标的技巧,希望能给大家一些启发。TypeScript如果你要创建的项目满足以下任一条件,那么你应该考虑使用TypeScript来编写你的项目:从时间上看,是一个中长期可能更新或维护的项目来自篇幅来看,项目不是很小,有一定的复杂度从情感上来说,如果想引入类型系统让自己舒服,或者喜欢写类型和接口Tips在本地安装typescript之后,您可以使用npxtsc--init生成一个tsconfig.json文件。该文件列出了TypeScript的所有配置,你只需要取消相应配置的注释即可启用。这个配置最好放在项目模板里,省得你每次都要复制粘贴。如果你的项目模板是Node相关的,不要忘记将@types/node添加到package.json中。编码规范一个项目需要有统一的编程风格和规范。一般来说,使用EditorConfig规范编辑器的格式,使用ESLint检查代码错误,规范编程风格。市面上最流行的ESLint规范应该是AirbnbJavaScriptStyleGuide和JavaScriptStandardStyle。Tips如果你使用VSCode,你可以安装一个EditorConfigGenerator插件来快速生成一个.editorconfig文件。在本地安装eslint后,可以使用npxeslint--init快速生成一个你想要的.eslintrc.js配置。如果使用TypeScript语言和VSCode开发,可能还需要在项目模板根目录下创建.vscode目录,并在该目录下创建settings.json文件,写入如下内容启用ESLint插件VSCodeAuto-fixfunction:{"eslint.validate":["javascript","javascriptreact",{"language":"typescript",//该属性表示为typescript语言启用自动修复功能"autoFix":true}]}配置完成后可以在VSCode命令面板找到ESLint:Fixallauto-fixableProblems进行自动修复:测试框架一个好的开源项目一定有比较高的测试覆盖率,所以选择一个测试框架来编写测试代码至关重要。我更喜欢Jest,因为它很容易上手,而且一个包可以解决很多需求。同时有大厂背书,更适合个人开源项目。Jest的一些核心配置,可以看这篇文章。Tips在本地安装jest后,可以使用npxjest--init快速生成一个jest.config.js配置文件。CommitSpecification优秀的开源项目往往都有标准化且易于阅读的Commit信息。我们可以使用一些工具来帮助我们实现目标。主要从以下两点着手:编写Commit信息时,提醒如何填写关键信息,如commit类型、涉及变更的文件等;为了实现这一点,我们可以使用husky来指定prepare-commit-msg钩子被触发时执行的命令,即gitcommit运行后立即执行的命令。该命令实际执行的程序可以使用commitizen。在package.json中写入:{//其他配置..."husky":{"hooks":{"prepare-commit-msg":"exec