fes.js/guide/plugin.html

52 lines
34 KiB
HTML
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.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="VuePress 2.0.0-beta.53">
<style>
:root {
--c-bg: #fff;
}
html.dark {
--c-bg: #22272e;
}
html, body {
background-color: var(--c-bg);
}
</style>
<script>
const userMode = localStorage.getItem('vuepress-color-scheme');
const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
document.documentElement.classList.toggle('dark', true);
}
</script>
<link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>插件 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案">
<link rel="preload" href="/fes.js/assets/style.2de37a47.css" as="style" /><link rel="stylesheet" href="/fes.js/assets/style.2de37a47.css" />
<link rel="modulepreload" href="/fes.js/assets/app.1fff394b.js"><link rel="modulepreload" href="/fes.js/assets/plugin.html.65e2e2cd.js"><link rel="modulepreload" href="/fes.js/assets/plugin.html.4294c881.js"><link rel="prefetch" href="/fes.js/assets/index.html.c1c0d5f4.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.f01282d4.js" as="script" /><link rel="prefetch" href="/fes.js/assets/builder.html.41d262aa.js" as="script" /><link rel="prefetch" href="/fes.js/assets/config.html.1c29538e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/contributing.html.18b532cd.js" as="script" /><link rel="prefetch" href="/fes.js/assets/css.html.afae2aea.js" as="script" /><link rel="prefetch" href="/fes.js/assets/directory-structure.html.f4065d91.js" as="script" /><link rel="prefetch" href="/fes.js/assets/env.html.08b9b704.js" as="script" /><link rel="prefetch" href="/fes.js/assets/faq.html.34e02ab8.js" as="script" /><link rel="prefetch" href="/fes.js/assets/getting-started.html.4674ba1a.js" as="script" /><link rel="prefetch" href="/fes.js/assets/image.html.d54c6051.js" as="script" /><link rel="prefetch" href="/fes.js/assets/mock.html.1d7540bc.js" as="script" /><link rel="prefetch" href="/fes.js/assets/public.html.ce835cb0.js" as="script" /><link rel="prefetch" href="/fes.js/assets/route.html.65547e37.js" as="script" /><link rel="prefetch" href="/fes.js/assets/runtime-config.html.692db2b2.js" as="script" /><link rel="prefetch" href="/fes.js/assets/template.html.de04006d.js" as="script" /><link rel="prefetch" href="/fes.js/assets/upgrade3.html.f8453010.js" as="script" /><link rel="prefetch" href="/fes.js/assets/api.html.8cb21890.js" as="script" /><link rel="prefetch" href="/fes.js/assets/cli.html.0b7f0983.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.f9721522.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.d0d11947.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.52d8d12d.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.0609b1b7.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.2ac21041.js" as="script" /><link rel="prefetch" href="/fes.js/assets/api.html.a5f3fb15.js" as="script" /><link rel="prefetch" href="/fes.js/assets/access.html.7030a42b.js" as="script" /><link rel="prefetch" href="/fes.js/assets/editor.html.a0484bbe.js" as="script" /><link rel="prefetch" href="/fes.js/assets/enums.html.28629e2b.js" as="script" /><link rel="prefetch" href="/fes.js/assets/icon.html.0299fcd3.js" as="script" /><link rel="prefetch" href="/fes.js/assets/jest.html.e33cf0c4.js" as="script" /><link rel="prefetch" href="/fes.js/assets/layout.html.1fadc1b9.js" as="script" /><link rel="prefetch" href="/fes.js/assets/locale.html.b34d3672.js" as="script" /><link rel="prefetch" href="/fes.js/assets/login.html.69f1e79f.js" as="script" /><link rel="prefetch" href="/fes.js/assets/model.html.72d355a9.js" as="script" /><link rel="prefetch" href="/fes.js/assets/pinia.html.36d2f07b.js" as="script" /><link rel="prefetch" href="/fes.js/assets/qiankun.html.fef1ea5f.js" as="script" /><link rel="prefetch" href="/fes.js/assets/request.html.e186dff0.js" as="script" /><link rel="prefetch" href="/fes.js/assets/sass.html.d347aba7.js" as="script" /><link rel="prefetch" href="/fes.js/assets/swc.html.95bfd8be.js" as="script" /><link rel="prefetch" href="/fes.js/assets/vuex.html.41eb0107.js" as="script" /><link rel="prefetch" href="/fes.js/assets/watermark.html.d6de8921.js" as="script" /><link rel="prefetch" href="/fes.js/assets/windicss.html.cc3815a6.js" as="script" /><link rel="prefetch" href="/fes.js/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.dcb7e541.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.5aeb969b.js" as="script" /><link rel="prefetch" href="/fes.js/assets/builder.html.55a7cc1f.js" as="script" /><link rel="prefetch" href="/fes.js/assets/config.html.8e53c331.js" as="script" /><link rel="prefetch" href="/fes.js/assets/contributing.html.a6331978.js" as="script" /><link rel="prefetch" href="/fes.js/assets/css.html.60666f3a.js" as="script" /><link rel="prefetch" href="/fes.js/assets/directory-structure.html.405ab82b.js" as="script" /><link rel="prefetch" href="/fes.js/assets/env.html.90215696.js" as="script" /><link rel="prefetch" href="/fes.js/assets/faq.html.ea3f8c6e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/getting-started.html.d3b9cf9e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/image.html.f92ca3e1.js" as="script" /><link rel="prefetch" href="/fes.js/assets/mock.html.80f47335.js" as="script" /><link rel="prefetch" href="/fes.js/assets/public.html.b43d4cac.js" as="script" /><link rel="prefetch" href="/fes.js/assets/route.html.83ea4e67.js" as="script" /><link rel="prefetch" href="/fes.js/assets/runtime-config.html.4bc14dd5.js" as="script" /><link rel="prefetch" href="/fes.js/assets/template.html.4157d97a.js" as="script" /><link rel="prefetch" href="/fes.js/assets/upgrade3.html.0c4ef841.js" as="script" /><link rel="prefetch" href="/fes.js/assets/api.html.a50ff32f.js" as="script" /><link rel="prefetch" href="/fes.js/assets/cli.html.1bdad203.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.2916e212.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.fcf804cf.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.bbacd821.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.af34d57a.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.c3f5c27f.js" as="script" /><link rel="prefetch" href="/fes.js/assets/api.html.e97bc97c.js" as="script" /><link rel="prefetch" href="/fes.js/assets/access.html.a62ebf7c.js" as="script" /><link rel="prefetch" href="/fes.js/assets/editor.html.bb339413.js" as="script" /><link rel="prefetch" href="/fes.js/assets/enums.html.e93ea61f.js" as="script" /><link rel="prefetch" href="/fes.js/assets/icon.html.6deb220e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/jest.html.fbca39c1.js" as="script" /><link rel="prefetch" href="/fes.js/assets/layout.html.198d11d8.js" as="script" /><link rel="prefetch" href="/fes.js/assets/locale.html.8706b2b3.js" as="script" /><link rel="prefetch" href="/fes.js/assets/login.html.d631dbb6.js" as="script" /><link rel="prefetch" href="/fes.js/assets/model.html.9b462f64.js" as="script" /><link rel="prefetch" href="/fes.js/assets/pinia.html.7f9b2e48.js" as="script" /><link rel="prefetch" href="/fes.js/assets/qiankun.html.87eae9e6.js" as="script" /><link rel="prefetch" href="/fes.js/assets/request.html.b3bfcb9e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/sass.html.3cf05a81.js" as="script" /><link rel="prefetch" href="/fes.js/assets/swc.html.ee318276.js" as="script" /><link rel="prefetch" href="/fes.js/assets/vuex.html.0b3540af.js" as="script" /><link rel="prefetch" href="/fes.js/assets/watermark.html.6e85bd26.js" as="script" /><link rel="prefetch" href="/fes.js/assets/windicss.html.6138fa98.js" as="script" /><link rel="prefetch" href="/fes.js/assets/404.html.500851b0.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.0b6f9a66.js" as="script" />
</head>
<body>
<div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><img class="logo" src="/fes.js/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/fes.js/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.4"><span class="title">v3.0.4</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.4"><span class="title">v3.0.4</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/fes.js/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.4"><span class="title">v3.0.4</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.4"><span class="title">v3.0.4</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/fes.js/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/fes.js/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/guide/plugin.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/fes.js/guide/plugin.html#插件的-id-和-key" class="router-link-active router-link-exact-active sidebar-item" aria-label="插件的 id 和 key"><!--[--><!--]--> 插件的 id 和 key <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/guide/plugin.html#启动插件" class="router-link-active router-link-exact-active sidebar-item" aria-label="启动插件"><!--[--><!--]--> 启动插件 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/fes.js/guide/plugin.html#package-json-依赖" class="router-link-active router-link-exact-active sidebar-item" aria-label="package.json 依赖"><!--[--><!--]--> package.json 依赖 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/guide/plugin.html#配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/guide/plugin.html#环境变量" class="router-link-active router-link-exact-active sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/fes.js/guide/plugin.html#禁用插件" class="router-link-active router-link-exact-active sidebar-item" aria-label="禁用插件"><!--[--><!--]--> 禁用插件 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/guide/plugin.html#配置插件" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置插件"><!--[--><!--]--> 配置插件 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/fes.js/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/fes.js/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/fes.js/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><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></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/plugin.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">qlin</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/guide/route.html" class="" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/guide/template.html" class="" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div>
<script type="module" src="/fes.js/assets/app.1fff394b.js" defer></script>
</body>
</html>