@shixinde/vuepress-theme-init
Version:
29 lines (28 loc) • 11.2 kB
JavaScript
import{_ as n,c as i,o as l,a as e}from"./app-Dx9bNbfq.js";const s={},a=e(`<h3 id="_4-项目组织规范" tabindex="-1"><a class="header-anchor" href="#_4-项目组织规范"><span>4 项目组织规范</span></a></h3><p>项目组织规范定义了如何组织一个前端项目, 例如项目的命名、项目的文件结构、版本号规范等等。尤其对于开源项目,规范化的项目组织就更重要了。</p><h4 id="_4-1-通用的项目组织规范" tabindex="-1"><a class="header-anchor" href="#_4-1-通用的项目组织规范"><span>4.1 通用的项目组织规范</span></a></h4><p>一个典型的项目组织规范如下:</p><ul><li><p>README.md: 项目说明, 这个是最重要。你必须在这里提供关于项目的关键信息或者相关信息的入口. 一般包含下列信息:</p><ul><li>简要描述、项目主要特性</li><li>运行环境/依赖、安装和构建、测试指南</li><li>简单示例代码</li><li>文档或文档入口, 其他版本或相关资源入口</li><li>联系方式、讨论群</li><li>许可、贡献/开发指南</li></ul></li><li><p>CHANGELOG.md: 放置每个版本的变动内容, 通常要描述每个版本变更的内容。方便使用者确定应该使用哪个版本. 关于CHANGELOG的规范可以参考keep a changelog</p></li><li><p>package.json: 前端项目必须. 描述当前的版本、可用的命令、包名、依赖、环境约束、项目配置等信息.</p></li><li><p>.gitignore: 忽略不必要的文件,避免将自动生成的文件提交到版本库</p></li><li><p>.gitattributes: git配置,有一些跨平台差异的行为可能需要在这里配置一下,如换行规则</p></li><li><p>docs/: 项目的细化文档, 可选.</p></li><li><p>examples/: 项目的示例代码,可选.</p></li><li><p>build: 项目工具类脚本放置在这里,非必须。如果使用统一构建工具,则没有这个目录</p></li><li><p>dist/: 项目构建结果输出目录</p></li><li><p>src/: 源代码目录</p></li><li><p>tests/: 单元测试目录. 按照Jest规范, <code>__tests__</code>目录通常和被测试的模块在同一个父目录下, 例如: /src <strong>tests</strong>/ index.ts a.ts index.ts a.ts 复制代码</p></li><li><p>tests: 全局的测试目录,通常放应用的集成测试或E2E测试等用例</p></li><li><p>.env*: 项目中我们通常会使用</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">环境变量</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>来影响应用在不同运行环境下的行为. 可以通过dotEnv来从文件中读取环境变量. 通常有三个文件: 基本上这些文件的变动的频率很少,团队成员应该不要随意变动,以免影响其他成员。所以通常会使用</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">.env.*.local</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>文件来覆盖上述的配置, 另外会设置版本库来忽略</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">*.local</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>文件.</p><ul><li><code>.env</code> 通用的环境变量</li><li><code>.env.development</code> 开发环境的环境变量</li><li><code>.env.production</code> 生成环境的环境变量</li></ul></li></ul><p>对于开源项目通常还包括这些目录:</p><ul><li>LICENSE: 说明项目许可</li><li>.github: 开源贡献规范和指南 <ul><li>CONTRIBUTING: 贡献指南, 这里一般会说明贡献的规范、以及项目的基本组织、架构等信息</li><li>CODE_OF_CONDUCT: 行为准则</li><li>COMMIT_CONVENTION: 提交信息规范,上文已经提及</li><li>ISSUE_TEMPLATE: Issue的模板,github可以自动识别这个模板</li><li>PULL_REQUEST_TEMPLATE: PR模板</li></ul></li></ul><p>任意一个优秀的开源项目都是你的老师,例如React、Vue...</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line"> # 启用gzip</span>
<span class="line"> gzip on;</span>
<span class="line"> gzip_min_length 1k;</span>
<span class="line"> gzip_comp_level 6;</span>
<span class="line"> gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype;</span>
<span class="line"> gzip_vary on;</span>
<span class="line"> gzip_static on; # 启用静态gzip,直接使用预压缩的.gz文件</span>
<span class="line"> </span>
<span class="line"> # 启用brotli(需要安装ngx_brotli模块)</span>
<span class="line"> brotli on;</span>
<span class="line"> brotli_comp_level 6;</span>
<span class="line"> brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype;</span>
<span class="line"> brotli_static on; # 启用静态brotli,直接使用预压缩的.br文件</span>
<span class="line"> </span>
<span class="line"> # 静态资源缓存设置</span>
<span class="line"> location /web/static/ {</span>
<span class="line"> expires 30d;</span>
<span class="line"> add_header Cache-Control "public, max-age=2592000";</span>
<span class="line"> }</span>
<span class="line"> </span>
<span class="line"> # 禁止访问敏感文件</span>
<span class="line"> location ~ \\.(htaccess|env|git) {</span>
<span class="line"> deny all;</span>
<span class="line"> }</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,9),t=[a];function p(c,d){return l(),i("div",null,t)}const o=n(s,[["render",p],["__file","临时使用.html.vue"]]),v=JSON.parse('{"path":"/%E4%B8%B4%E6%97%B6%E4%BD%BF%E7%94%A8.html","title":"","lang":"zh-CN","frontmatter":{},"headers":[{"level":3,"title":"4 项目组织规范","slug":"_4-项目组织规范","link":"#_4-项目组织规范","children":[]}],"git":{"updatedTime":1755344722000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":3}]},"filePathRelative":"临时使用.md","excerpt":"<h3>4 项目组织规范</h3>\\n<p>项目组织规范定义了如何组织一个前端项目, 例如项目的命名、项目的文件结构、版本号规范等等。尤其对于开源项目,规范化的项目组织就更重要了。</p>\\n<h4>4.1 通用的项目组织规范</h4>\\n<p>一个典型的项目组织规范如下:</p>\\n<ul>\\n<li>\\n<p>README.md: 项目说明, 这个是最重要。你必须在这里提供关于项目的关键信息或者相关信息的入口. 一般包含下列信息:</p>\\n<ul>\\n<li>简要描述、项目主要特性</li>\\n<li>运行环境/依赖、安装和构建、测试指南</li>\\n<li>简单示例代码</li>\\n<li>文档或文档入口, 其他版本或相关资源入口</li>\\n<li>联系方式、讨论群</li>\\n<li>许可、贡献/开发指南</li>\\n</ul>\\n</li>\\n<li>\\n<p>CHANGELOG.md: 放置每个版本的变动内容, 通常要描述每个版本变更的内容。方便使用者确定应该使用哪个版本. 关于CHANGELOG的规范可以参考keep a changelog</p>\\n</li>\\n<li>\\n<p>package.json: 前端项目必须. 描述当前的版本、可用的命令、包名、依赖、环境约束、项目配置等信息.</p>\\n</li>\\n<li>\\n<p>.gitignore: 忽略不必要的文件,避免将自动生成的文件提交到版本库</p>\\n</li>\\n<li>\\n<p>.gitattributes: git配置,有一些跨平台差异的行为可能需要在这里配置一下,如换行规则</p>\\n</li>\\n<li>\\n<p>docs/: 项目的细化文档, 可选.</p>\\n</li>\\n<li>\\n<p>examples/: 项目的示例代码,可选.</p>\\n</li>\\n<li>\\n<p>build: 项目工具类脚本放置在这里,非必须。如果使用统一构建工具,则没有这个目录</p>\\n</li>\\n<li>\\n<p>dist/: 项目构建结果输出目录</p>\\n</li>\\n<li>\\n<p>src/: 源代码目录</p>\\n</li>\\n<li>\\n<p>tests/: 单元测试目录. 按照Jest规范, <code>__tests__</code>目录通常和被测试的模块在同一个父目录下, 例如: /src <strong>tests</strong>/ index.ts a.ts index.ts a.ts 复制代码</p>\\n</li>\\n<li>\\n<p>tests: 全局的测试目录,通常放应用的集成测试或E2E测试等用例</p>\\n</li>\\n<li>\\n<p>.env*: 项目中我们通常会使用</p>\\n<div class=\\"language-text\\" data-highlighter=\\"prismjs\\" data-ext=\\"text\\" data-title=\\"text\\"><pre class=\\"language-text\\"><code><span class=\\"line\\">环境变量</span>\\n<span class=\\"line\\"></span></code></pre></div><p>来影响应用在不同运行环境下的行为. 可以通过dotEnv来从文件中读取环境变量. 通常有三个文件: 基本上这些文件的变动的频率很少,团队成员应该不要随意变动,以免影响其他成员。所以通常会使用</p>\\n<div class=\\"language-text\\" data-highlighter=\\"prismjs\\" data-ext=\\"text\\" data-title=\\"text\\"><pre class=\\"language-text\\"><code><span class=\\"line\\">.env.*.local</span>\\n<span class=\\"line\\"></span></code></pre></div><p>文件来覆盖上述的配置, 另外会设置版本库来忽略</p>\\n<div class=\\"language-text\\" data-highlighter=\\"prismjs\\" data-ext=\\"text\\" data-title=\\"text\\"><pre class=\\"language-text\\"><code><span class=\\"line\\">*.local</span>\\n<span class=\\"line\\"></span></code></pre></div><p>文件.</p>\\n<ul>\\n<li><code>.env</code> 通用的环境变量</li>\\n<li><code>.env.development</code> 开发环境的环境变量</li>\\n<li><code>.env.production</code> 生成环境的环境变量</li>\\n</ul>\\n</li>\\n</ul>"}');export{o as comp,v as data};