fes.js/assets/guide_plugin.md.7d7f4c03.js

import{_ as s,o as a,c as o,V as e}from"./chunks/framework.b31a4d00.js";const u=JSON.parse('{"title":"插件","description":"","frontmatter":{},"headers":[],"relativePath":"guide/plugin.md"}'),n={name:"guide/plugin.md"},l=e(`<h1 id="插件" tabindex="-1">插件 <a class="header-anchor" href="#插件" aria-label="Permalink to &quot;插件&quot;">​</a></h1><h2 id="插件的-id-和-key" tabindex="-1">插件的 id 和 key <a class="header-anchor" href="#插件的-id-和-key" aria-label="Permalink to &quot;插件的 id 和 key&quot;">​</a></h2><p>每个插件都会对应一个 <code>id</code> 和一个 <code>key</code>，<strong><code>id</code> 是路径的简写，<code>key</code> 是进一步简化后用于配置的唯一值</strong>。</p><p>比如插件 <code>/node_modules/@fesjs/plugin-foo/index.js</code>，通常来说，其 <code>id</code> 为 <code>@fesjs/plugin-foo</code>，<code>key</code> 为 <code>foo</code>。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>id 一般用不上，对于普通开发者 key 用来配置插件，而插件开发者可以使用 key 判断是否安装某个插件。</p></div><h2 id="启动插件" tabindex="-1">启动插件 <a class="header-anchor" href="#启动插件" aria-label="Permalink to &quot;启动插件&quot;">​</a></h2><p>有多种方式引入插件</p><h3 id="package-json-依赖" tabindex="-1">package.json 依赖 <a class="header-anchor" href="#package-json-依赖" aria-label="Permalink to &quot;package.json 依赖&quot;">​</a></h3><p>Fes.js 会自动检测 <code>dependencies</code> 和 <code>devDependencies</code> 里的 fes 插件，比如：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">@fesjs/plugin-request</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>那么 <code>@fesjs/plugin-request</code> 会自动被注册，无需在配置里重复声明。</p><h3 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to &quot;配置&quot;">​</a></h3><p>在配置里可通过 <code>presets</code> 和 <code>plugins</code> 配置插件，比如：</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>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">presets</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./preset</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">foo/presets</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./plugin</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>通常用于几种情况：</p><ol><li>项目相对路径的插件</li><li>非 npm 包入口文件的插件</li></ol><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>请不要配置 npm 包的插件，否则会报重复注册的错误</p></div><h3 id="环境变量" tabindex="-1">环境变量 <a class="header-anchor" href="#环境变量" aria-label="Permalink to &quot;环境变量&quot;">​</a></h3><p>还可通过环境变量 <code>FES_PRESETS</code> 和 <code>FES_PLUGINS</code> 注册额外插件。</p><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:#BABED8;">FES_PRESETS</span><span style="color:#89DDFF;">=</span><span style="color:#C3E88D;">/a/b/preset.js</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">fes</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">dev</span></span></code></pre></div><h2 id="禁用插件" tabindex="-1">禁用插件 <a class="header-anchor" href="#禁用插件" aria-label="Permalink to &quot;禁用插件&quot;">​</a></h2><p>通过配置插件的 <code>key</code> 为 <code>false</code>，比如：</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>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>Mock 插件的 <code>key</code> 是 <code>mock</code>，我们在配置文件中配置 <code>mock</code> 为 <code>false</code>，则会禁用 Mock 插件及其功能。</p><h2 id="配置插件" tabindex="-1">配置插件 <a class="header-anchor" href="#配置插件" aria-label="Permalink to &quot;配置插件&quot;">​</a></h2><p>通过插件的 <code>key</code> 来配置插件，比如：</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>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#F07178;">prefix</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/v2</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>这里的 <code>mock</code> 是 Mock 插件 的 key。</p>`,29),p=[l];function c(t,r,i,d,D,y){return a(),o("div",null,p)}const h=s(n,[["render",c]]);export{u as __pageData,h as default};