fes.js/assets/reference_plugin_dev_index.md.1a7b2210.js

import{_ as s,o as a,c as e,V as n}from"./chunks/framework.b31a4d00.js";const h=JSON.parse('{"title":"插件介绍","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/dev/index.md"}'),l={name:"reference/plugin/dev/index.md"},o=n(`<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>一个插件是一个 <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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">api</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#BABED8;">api</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">describe</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        key</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">esbuild</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">        config</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            schema</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">joi</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">joi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">object</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;">            default</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{},</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;">        enableBy</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">api</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">EnableBy</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">config</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></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-label="Permalink to &quot;创建插件&quot;">​</a></h2><h5 id="第一步-安装create-fes-app" tabindex="-1">第一步：安装<code>create-fes-app</code> <a class="header-anchor" href="#第一步-安装create-fes-app" aria-label="Permalink to &quot;第一步：安装\`create-fes-app\`&quot;">​</a></h5><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;">npm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">i</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">-g</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">@fesjs/create-fes-app</span></span></code></pre></div><h5 id="第二步-创建插件项目" tabindex="-1">第二步：创建插件项目 <a class="header-anchor" href="#第二步-创建插件项目" aria-label="Permalink to &quot;第二步：创建插件项目&quot;">​</a></h5><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;">create-fes-app</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">pluginName</span></span></code></pre></div><p>在询问<code>Pick an template</code>时选择<code>Plugin</code>!</p><h5 id="第三步-进入插件目录-安装依赖" tabindex="-1">第三步：进入插件目录 &amp; 安装依赖 <a class="header-anchor" href="#第三步-进入插件目录-安装依赖" aria-label="Permalink to &quot;第三步：进入插件目录 &amp; 安装依赖&quot;">​</a></h5><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;">pluginName</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&amp;</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">i</span></span></code></pre></div><h5 id="第四步-启动编译" tabindex="-1">第四步：启动编译 <a class="header-anchor" href="#第四步-启动编译" aria-label="Permalink to &quot;第四步：启动编译&quot;">​</a></h5><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><h5 id="第五步-使用插件-api-完成你的插件-可以参考其他插件理解-api-用法和场景" tabindex="-1">第五步：使用插件 API 完成你的插件！（可以参考其他插件理解 api 用法和场景） <a class="header-anchor" href="#第五步-使用插件-api-完成你的插件-可以参考其他插件理解-api-用法和场景" aria-label="Permalink to &quot;第五步：使用插件 API 完成你的插件！（可以参考其他插件理解 api 用法和场景）&quot;">​</a></h5><h2 id="发布到-npm" tabindex="-1">发布到 npm <a class="header-anchor" href="#发布到-npm" aria-label="Permalink to &quot;发布到 npm&quot;">​</a></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),p=[o];function t(c,r,i,d,y,F){return a(),e("div",null,p)}const u=s(l,[["render",t]]);export{h as __pageData,u as default};