fes.js/assets/plugin.html.2a53561b.js

import{_ as s,o as a,c as e,f as n}from"./app.136d0839.js";const o={},p=n(`<h1 id="插件" tabindex="-1"><a class="header-anchor" href="#插件" aria-hidden="true">#</a> 插件</h1><h2 id="插件的-id-和-key" tabindex="-1"><a class="header-anchor" href="#插件的-id-和-key" aria-hidden="true">#</a> 插件的 id 和 key</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="custom-container tip"><p class="custom-container-title">提示</p><p>id 一般用不上，对于普通开发者 key 用来配置插件，而插件开发者可以使用 key 判断是否安装某个插件。</p></div><h2 id="启动插件" tabindex="-1"><a class="header-anchor" href="#启动插件" aria-hidden="true">#</a> 启动插件</h2><p>有多种方式引入插件</p><h3 id="package-json-依赖" tabindex="-1"><a class="header-anchor" href="#package-json-依赖" aria-hidden="true">#</a> package.json 依赖</h3><p>Fes.js 会自动检测 <code>dependencies</code> 和 <code>devDependencies</code> 里的 fes 插件，比如：</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
    <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token property">&quot;@fesjs/plugin-request&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.0.0&quot;</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></div><p>那么 <code>@fesjs/plugin-request</code> 会自动被注册，无需在配置里重复声明。</p><h3 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h3><p>在配置里可通过 <code>presets</code> 和 <code>plugins</code> 配置插件，比如：</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 literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;./preset&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;foo/presets&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;./plugin&#39;</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></div><p>通常用于几种情况：</p><ol><li>项目相对路径的插件</li><li>非 npm 包入口文件的插件</li></ol><div class="custom-container warning"><p class="custom-container-title">注意</p><p>请不要配置 npm 包的插件，否则会报重复注册的错误</p></div><h3 id="环境变量" tabindex="-1"><a class="header-anchor" href="#环境变量" aria-hidden="true">#</a> 环境变量</h3><p>还可通过环境变量 <code>FES_PRESETS</code> 和 <code>FES_PLUGINS</code> 注册额外插件。</p><p>比如：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token assign-left variable">FES_PRESETS</span><span class="token operator">=</span>/a/b/preset.js fes dev
</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><p>通过配置插件的 <code>key</code> 为 <code>false</code>，比如：</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 literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</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></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-hidden="true">#</a> 配置插件</h2><p>通过插件的 <code>key</code> 来配置插件，比如：</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 literal-property property">mock</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">&#39;/v2&#39;</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></div><p>这里的 <code>mock</code> 是 Mock 插件 的 key。</p>`,29),c=[p];function t(i,d){return a(),e("div",null,c)}const r=s(o,[["render",t],["__file","plugin.html.vue"]]);export{r as default};