fes.js/assets/plugin.html.96839139.js

20 lines
6.6 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import{_ as s,o as a,c as e,f as n}from"./app.0e52fd78.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};