fes.js/assets/index.html.b9b03365.js

import{_ as a,o as n,c as s,f as e}from"./app.136d0839.js";const p={},i=e(`<h1 id="插件介绍" tabindex="-1"><a class="header-anchor" href="#插件介绍" aria-hidden="true">#</a> 插件介绍</h1><h2 id="开始" tabindex="-1"><a class="header-anchor" href="#开始" aria-hidden="true">#</a> 开始</h2><p>一个插件是一个 <code>npm</code> 包，它能够为 Fes.js 创建的项目添加额外的功能，这些功能包括：</p><ul><li>项目的 webpack 配置。</li><li>修改项目的 babel 配置。</li><li>添加新的 fes 命令 - 例如 <code>@fes/plugin-jest</code> 添加了 <code>fes test</code> 命令，允许开发者运行单元测试。</li><li>集成 Vue 的插件。</li><li>修改路由配置</li><li>提供运行时 API</li><li>...</li></ul><p>插件的入口是一个函数，函数会以 API 对象作为第一个参数：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter">api</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    api<span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;esbuild&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token function">schema</span><span class="token punctuation">(</span><span class="token parameter">joi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">return</span> joi<span class="token punctuation">.</span><span class="token function">object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token literal-property property">enableBy</span><span class="token operator">:</span> api<span class="token punctuation">.</span>EnableBy<span class="token punctuation">.</span>config<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><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><p>API 对象是构建流程管理 Service 类的实例，api 提供一些有用的方法帮助你开发插件。</p><p><code>api.describe</code>用来描述插件：</p><ul><li><strong>key</strong>， 插件的 <code>key</code>，可以理解为插件的名称，在 <code>.fes.js</code> 中用 <code>key</code> 配置此插件。</li><li><strong>config</strong>，插件的配置信息： <ul><li>schema，定义配置的类型</li><li>default，默认配置</li></ul></li><li><strong>enableBy</strong>， 是否开启插件，可配置某些场景下禁用插件。</li></ul><h2 id="创建插件" tabindex="-1"><a class="header-anchor" href="#创建插件" aria-hidden="true">#</a> 创建插件</h2><h5 id="第一步-安装create-fes-app" tabindex="-1"><a class="header-anchor" href="#第一步-安装create-fes-app" aria-hidden="true">#</a> 第一步：安装<code>create-fes-app</code></h5><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> i <span class="token parameter variable">-g</span> @fesjs/create-fes-app
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h5 id="第二步-创建插件项目" tabindex="-1"><a class="header-anchor" href="#第二步-创建插件项目" aria-hidden="true">#</a> 第二步：创建插件项目</h5><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>create-fes-app pluginName
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>在询问<code>Pick an template</code>时选择<code>Plugin</code>!</p><h5 id="第三步-进入插件目录-安装依赖" tabindex="-1"><a class="header-anchor" href="#第三步-进入插件目录-安装依赖" aria-hidden="true">#</a> 第三步：进入插件目录 &amp; 安装依赖</h5><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token builtin class-name">cd</span> pluginName <span class="token operator">&amp;</span> <span class="token function">pnpm</span> i
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h5 id="第四步-启动编译" tabindex="-1"><a class="header-anchor" href="#第四步-启动编译" aria-hidden="true">#</a> 第四步：启动编译</h5><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><h5 id="第五步-使用插件-api-完成你的插件-可以参考其他插件理解-api-用法和场景" tabindex="-1"><a class="header-anchor" href="#第五步-使用插件-api-完成你的插件-可以参考其他插件理解-api-用法和场景" aria-hidden="true">#</a> 第五步：使用插件 API 完成你的插件！（可以参考其他插件理解 api 用法和场景）</h5><h2 id="发布到-npm" tabindex="-1"><a class="header-anchor" href="#发布到-npm" aria-hidden="true">#</a> 发布到 npm</h2><p>以 <code>@fesjs/preset-</code>、<code>@fesjs/plugin-</code>、<code>@webank/fes-preset-</code>、<code>@webank/fes-plugin-</code>、<code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头的依赖会被 Fes.js 自动注册为插件或插件集。</p><p>所以编写好的插件想发布到 npm 供其他人使用，包名必须是 <code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头。</p>`,23),c=[i];function t(o,l){return n(),s("div",null,c)}const r=a(p,[["render",t],["__file","index.html.vue"]]);export{r as default};