import{_ as d,r as t,o as i,c as r,b as e,d as a,a as n,f as o}from"./app.bd9c95b7.js";const c={},l=e("h1",{id:"贡献指南",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#贡献指南","aria-hidden":"true"},"#"),a(" 贡献指南")],-1),p=e("h2",{id:"包概览",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#包概览","aria-hidden":"true"},"#"),a(" 包概览")],-1),h={href:"https://pnpm.io/pnpm-workspace_yaml",target:"_blank",rel:"noopener noreferrer"},u={href:"https://en.wikipedia.org/wiki/Monorepo",target:"_blank",rel:"noopener noreferrer"},m=e("code",null,"packages",-1),f=o('<ul><li><p><code>@fesjs/create-fes-app</code>: 创建项目模板模块。提供<code>create-fes-app</code>命令，提供创建多种类型项目模板的能力。</p></li><li><p><code>@fesjs/compiler</code>: 编译时插件管理模块。定义插件的生命周期、插件配置、插件通讯机制等。</p></li><li><p><code>@fesjs/runtime</code>: 运行时插件模块。集成了 vue-router，定义运行时插件生命周期、插件通讯机制。</p></li><li><p><code>@fesjs/preset-build-in</code>: 内置插件集。包含<code>dev</code>、<code>build</code>等命令，集成 webpack5+babel，提供方便编写插件的 API，入口文件处理，路由处理等能力。</p></li><li><p><code>@fesjs/fes-template</code>: 适用于 PC 类型的模板项目。</p></li><li><p><code>@fesjs/fes-template-h5</code>: 适用于 H5 类型的模板项目。</p></li><li><p><code>@fesjs/plugin-${name}</code>: 官方插件。</p></li><li><p><code>@fesjs/fes</code>: 入口模块。提供<code>fes</code>命令和 API 入口，封装<code>@fesjs/compiler</code> + <code>@fesjs/runtime</code> + <code>@fesjs/preset-build-in</code>，用户只需要安装此依赖和其他插件。</p></li></ul><h2 id="开发准备" tabindex="-1"><a class="header-anchor" href="#开发准备" aria-hidden="true">#</a> 开发准备</h2><p>开发要求：</p>',3),b={href:"http://nodejs.org",target:"_blank",rel:"noopener noreferrer"},v={href:"https://pnpm.io/",target:"_blank",rel:"noopener noreferrer"},g=e("p",null,"本项目开发使用的一些主要工具：",-1),_={href:"https://jestjs.io/",target:"_blank",rel:"noopener noreferrer"},k={href:"https://eslint.org/",target:"_blank",rel:"noopener noreferrer"},x={href:"https://prettier.io/",target:"_blank",rel:"noopener noreferrer"},j=o(`<p>克隆仓库：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">git</span> clone https://github.com/WeBankFinTech/fes.js.git
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>进入<code>fes.js</code>目录，安装依赖：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">pnpm</span> i
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="贡献文档" tabindex="-1"><a class="header-anchor" href="#贡献文档" aria-hidden="true">#</a> 贡献文档</h2>`,5),w=e("code",null,"docs",-1),q={href:"https://v2.vuepress.vuejs.org/zh/",target:"_blank",rel:"noopener noreferrer"},P=o(`<h4 id="第一步-启动服务" tabindex="-1"><a class="header-anchor" href="#第一步-启动服务" aria-hidden="true">#</a> 第一步：启动服务</h4><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">pnpm</span> docs:dev
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="第二步-修改-md-文件" tabindex="-1"><a class="header-anchor" href="#第二步-修改-md-文件" aria-hidden="true">#</a> 第二步：修改 md 文件</h4><p>菜单配置在<code>/docs/.vuepress/configs/sidebar/zh.ts</code>中，可以通过此配置找到对应想修改的文档。</p><p>如果想添加图片，则可以先把图片添加至<code>/docs/.vuepress/public</code>，在代码中使用：</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$withBase(&#39;framework.png&#39;)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>架构<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="第三步-查看更新" tabindex="-1"><a class="header-anchor" href="#第三步-查看更新" aria-hidden="true">#</a> 第三步：查看更新</h4><p>当 md 文档保存后，文档会自动更新，在<code>http://localhost:8080/</code>查看。</p><h2 id="贡献源码" tabindex="-1"><a class="header-anchor" href="#贡献源码" aria-hidden="true">#</a> 贡献源码</h2><p><code>Fes.js</code>统一使用<code>ES Module</code>规范编写源码，代码会在 node 端和浏览器端执行，所以源码需要编译后才能发布成包，再被执行。</p><h4 id="启动编译服务" tabindex="-1"><a class="header-anchor" href="#启动编译服务" aria-hidden="true">#</a> 启动编译服务</h4><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">pnpm</span> dev
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>当我们修改<code>build.config.js</code>中配置的包代码时，会把<code>src</code>目录的源码编译后到<code>lib</code>目录。</p><h4 id="修改源码" tabindex="-1"><a class="header-anchor" href="#修改源码" aria-hidden="true">#</a> 修改源码</h4><p>在了解<code>Fes.js</code>设计前提下，修改核心代码或者插件代码。</p><h4 id="验证修改内容" tabindex="-1"><a class="header-anchor" href="#验证修改内容" aria-hidden="true">#</a> 验证修改内容</h4><p>根据需求选择模板项目来验证修改内容，比如选择<code>fes-template</code>：</p><ol><li>查看需待验证包是否已经添加到模板项目的依赖中，如果没有则在模板项目的 package.json 中添加包依赖，添加后在根目录执行<code>pnpm</code>关联依赖</li><li>启动模板项目的开发服务</li></ol><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token builtin class-name">cd</span> packages/fes-template
<span class="token function">pnpm</span> dev
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3"><li>在项目模板中添加代码验证修改内容</li><li>打开<code>localhost:8000</code>查看结果</li></ol><h4 id="快速调试技巧" tabindex="-1"><a class="header-anchor" href="#快速调试技巧" aria-hidden="true">#</a> 快速调试技巧</h4><p>每次修改插件或者核心代码后，等待自动编译完，需要在模板目录重新执行<code>fes dev</code>，比较费时费力。</p><p>可以先在模板的 <code>.fes</code> 目录中找到对应临时代码，更改逻辑，验证完后再将变更逻辑保存到正式文件中。</p><div class="custom-container warning"><p class="custom-container-title">注意</p><p>直接修改临时文件切莫重新执行<code>fes dev</code>，修改会被覆盖。</p></div><h2 id="提交-pr" tabindex="-1"><a class="header-anchor" href="#提交-pr" aria-hidden="true">#</a> 提交 PR</h2><ol><li>fork 项目!</li><li>创建你的功能分支: git checkout -b my-new-feature</li><li>本地提交新代码: git commit -am &#39;Add some feature&#39;</li><li>推送本地到服务器分支: git push origin my-new-feature</li><li>创建一个 PR</li></ol>`,26);function B(E,N){const s=t("ExternalLinkIcon");return i(),r("div",null,[l,p,e("p",null,[a("项目仓库借助于 "),e("a",h,[a("pnpm 工作区"),n(s)]),a(" 来实现 "),e("a",u,[a(" Monorepo"),n(s)]),a(" ，在 "),m,a(" 目录下存放多个互相关联的独立包。")]),f,e("ul",null,[e("li",null,[e("a",b,[a("Node.js v14+"),n(s)])]),e("li",null,[e("a",v,[a("pnpm v8"),n(s)])])]),g,e("ul",null,[e("li",null,[e("a",_,[a("Jest"),n(s)]),a(" 用于单元测试")]),e("li",null,[e("a",k,[a("ESLint"),n(s)]),a(" + "),e("a",x,[a("Prettier"),n(s)]),a(" 用于代码检查和格式化")])]),j,e("p",null,[a("文档代码在"),w,a("目录，基于 "),e("a",q,[a("vuepress"),n(s)]),a(" 实现。")]),P])}const V=d(c,[["render",B],["__file","contributing.html.vue"]]);export{V as default};