fes.js/assets/guide_contributing.md.8666fd37.js

import{o as e,c as a,V as s}from"./chunks/framework.b31a4d00.js";const o=s('<h1 id="贡献指南" tabindex="-1">贡献指南 <a class="header-anchor" href="#贡献指南" aria-label="Permalink to &quot;贡献指南&quot;">​</a></h1><h2 id="包概览" tabindex="-1">包概览 <a class="header-anchor" href="#包概览" aria-label="Permalink to &quot;包概览&quot;">​</a></h2><p>项目仓库借助于 <a href="https://pnpm.io/pnpm-workspace_yaml" target="_blank" rel="noreferrer">pnpm 工作区</a> 来实现 <a href="https://en.wikipedia.org/wiki/Monorepo" target="_blank" rel="noreferrer"> Monorepo</a> ，在 <code>packages</code> 目录下存放多个互相关联的独立包。</p><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-label="Permalink to &quot;开发准备&quot;">​</a></h2><p>开发要求：</p><ul><li><a href="http://nodejs.org" target="_blank" rel="noreferrer">Node.js v14+</a></li><li><a href="https://pnpm.io/" target="_blank" rel="noreferrer">pnpm v8</a></li></ul><p>本项目开发使用的一些主要工具：</p><ul><li><a href="https://jestjs.io/" target="_blank" rel="noreferrer">Jest</a> 用于单元测试</li><li><a href="https://eslint.org/" target="_blank" rel="noreferrer">ESLint</a> + <a href="https://prettier.io/" target="_blank" rel="noreferrer">Prettier</a> 用于代码检查和格式化</li></ul><p>克隆仓库：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">git</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">clone</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">https://github.com/WeBankFinTech/fes.js.git</span></span></code></pre></div><p>进入<code>fes.js</code>目录，安装依赖：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">i</span></span></code></pre></div><h2 id="贡献文档" tabindex="-1">贡献文档 <a class="header-anchor" href="#贡献文档" aria-label="Permalink to &quot;贡献文档&quot;">​</a></h2><p>文档代码在<code>docs</code>目录，基于 <a href="https://vitepress.dev/guide/what-is-vitepress" target="_blank" rel="noreferrer">vitepress</a> 实现。</p><h4 id="第一步-启动服务" tabindex="-1">第一步：启动服务 <a class="header-anchor" href="#第一步-启动服务" aria-label="Permalink to &quot;第一步：启动服务&quot;">​</a></h4><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">docs:dev</span></span></code></pre></div><h4 id="第二步-修改-md-文件" tabindex="-1">第二步：修改 md 文件 <a class="header-anchor" href="#第二步-修改-md-文件" aria-label="Permalink to &quot;第二步：修改 md 文件&quot;">​</a></h4><p>菜单配置在<code>/docs/.vitpress/configs/sidebar/zh.ts</code>中，可以通过此配置找到对应想修改的文档。</p><p>如果想添加图片，则可以先把图片添加至<code>/docs/.vitpress/public</code>，在代码中使用：</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">withBase(&#39;framework.png&#39;)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">alt</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">架构</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span></code></pre></div><h4 id="第三步-查看更新" tabindex="-1">第三步：查看更新 <a class="header-anchor" href="#第三步-查看更新" aria-label="Permalink to &quot;第三步：查看更新&quot;">​</a></h4><p>当 md 文档保存后，文档会自动更新，在<code>http://localhost:8080/</code>查看。</p><h2 id="贡献源码" tabindex="-1">贡献源码 <a class="header-anchor" href="#贡献源码" aria-label="Permalink to &quot;贡献源码&quot;">​</a></h2><p><code>Fes.js</code>统一使用<code>ES Module</code>规范编写源码，代码会在 node 端和浏览器端执行，所以源码需要编译后才能发布成包，再被执行。</p><h4 id="启动编译服务" tabindex="-1">启动编译服务 <a class="header-anchor" href="#启动编译服务" aria-label="Permalink to &quot;启动编译服务&quot;">​</a></h4><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">dev</span></span></code></pre></div><p>当我们修改<code>build.config.js</code>中配置的包代码时，会把<code>src</code>目录的源码编译后到<code>lib</code>目录。</p><h4 id="修改源码" tabindex="-1">修改源码 <a class="header-anchor" href="#修改源码" aria-label="Permalink to &quot;修改源码&quot;">​</a></h4><p>在了解<code>Fes.js</code>设计前提下，修改核心代码或者插件代码。</p><h4 id="验证修改内容" tabindex="-1">验证修改内容 <a class="header-anchor" href="#验证修改内容" aria-label="Permalink to &quot;验证修改内容&quot;">​</a></h4><p>根据需求选择模板项目来验证修改内容，比如选择<code>fes-template</code>：</p><ol><li>查看需待验证包是否已经添加到模板项目的依赖中，如果没有则在模板项目的 package.json 中添加包依赖，添加后在根目录执行<code>pnpm</code>关联依赖</li><li>启动模板项目的开发服务</li></ol><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">packages/fes-template</span></span>\n<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">dev</span></span></code></pre></div><ol start="3"><li>在项目模板中添加代码验证修改内容</li><li>打开<code>localhost:8000</code>查看结果</li></ol><h4 id="快速调试技巧" tabindex="-1">快速调试技巧 <a class="header-anchor" href="#快速调试技巧" aria-label="Permalink to &quot;快速调试技巧&quot;">​</a></h4><p>每次修改插件或者核心代码后，等待自动编译完，需要在模板目录重新执行<code>fes dev</code>，比较费时费力。</p><p>可以先在模板的 <code>.fes</code> 目录中找到对应临时代码，更改逻辑，验证完后再将变更逻辑保存到正式文件中。</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>直接修改临时文件切莫重新执行<code>fes dev</code>，修改会被覆盖。</p></div><h2 id="提交-pr" tabindex="-1">提交 PR <a class="header-anchor" href="#提交-pr" aria-label="Permalink to &quot;提交 PR&quot;">​</a></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>',41),l=[o],i=JSON.parse('{"title":"贡献指南","description":"","frontmatter":{},"headers":[],"relativePath":"guide/contributing.md"}'),t={name:"guide/contributing.md"},d=Object.assign(t,{setup(p){return(n,r)=>(e(),a("div",null,l))}});export{i as __pageData,d as default};