mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
229 lines
108 KiB
HTML
229 lines
108 KiB
HTML
<!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>插件 API | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案">
|
||
<link rel="preload" href="/assets/style.db68ef45.css" as="style" /><link rel="stylesheet" href="/assets/style.db68ef45.css" />
|
||
<link rel="modulepreload" href="/assets/app.f1ba41a1.js"><link rel="modulepreload" href="/assets/api.html.923ff1b2.js"><link rel="modulepreload" href="/assets/api.html.38a04e9b.js"><link rel="prefetch" href="/assets/index.html.42004c8b.js" as="script" /><link rel="prefetch" href="/assets/index.html.c87ac3b5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.62a6223d.js" as="script" /><link rel="prefetch" href="/assets/config.html.0b87d9a2.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.4df16d07.js" as="script" /><link rel="prefetch" href="/assets/css.html.dabd77a6.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.914d1ba5.js" as="script" /><link rel="prefetch" href="/assets/env.html.26ffa3c2.js" as="script" /><link rel="prefetch" href="/assets/faq.html.59e9b49e.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.777f8908.js" as="script" /><link rel="prefetch" href="/assets/image.html.c3a1f151.js" as="script" /><link rel="prefetch" href="/assets/mock.html.5ad97857.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.e342e981.js" as="script" /><link rel="prefetch" href="/assets/public.html.60d00633.js" as="script" /><link rel="prefetch" href="/assets/route.html.d598fc1d.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.1e32c644.js" as="script" /><link rel="prefetch" href="/assets/template.html.028fe18a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.cc3678de.js" as="script" /><link rel="prefetch" href="/assets/api.html.a2f4aa83.js" as="script" /><link rel="prefetch" href="/assets/cli.html.e4626089.js" as="script" /><link rel="prefetch" href="/assets/index.html.817e27f0.js" as="script" /><link rel="prefetch" href="/assets/index.html.6f1f9e8b.js" as="script" /><link rel="prefetch" href="/assets/index.html.8ce076bf.js" as="script" /><link rel="prefetch" href="/assets/index.html.d5bb8cea.js" as="script" /><link rel="prefetch" href="/assets/index.html.dcf6db58.js" as="script" /><link rel="prefetch" href="/assets/access.html.b8ebda4d.js" as="script" /><link rel="prefetch" href="/assets/editor.html.82a67cdd.js" as="script" /><link rel="prefetch" href="/assets/enums.html.58ed0be2.js" as="script" /><link rel="prefetch" href="/assets/icon.html.fb1d1859.js" as="script" /><link rel="prefetch" href="/assets/jest.html.6948dd4d.js" as="script" /><link rel="prefetch" href="/assets/layout.html.fa7e26b8.js" as="script" /><link rel="prefetch" href="/assets/locale.html.d686d577.js" as="script" /><link rel="prefetch" href="/assets/login.html.46916c05.js" as="script" /><link rel="prefetch" href="/assets/model.html.4c6de279.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.3ebff14a.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.db762ac9.js" as="script" /><link rel="prefetch" href="/assets/request.html.368f0f7c.js" as="script" /><link rel="prefetch" href="/assets/sass.html.886a16af.js" as="script" /><link rel="prefetch" href="/assets/swc.html.bf594840.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.867c6b07.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.50983386.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.ea684936.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.d4b86a16.js" as="script" /><link rel="prefetch" href="/assets/index.html.a5002aee.js" as="script" /><link rel="prefetch" href="/assets/builder.html.1052aa07.js" as="script" /><link rel="prefetch" href="/assets/config.html.f5192561.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.38b62ae1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8b5b18fe.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.58c43fb2.js" as="script" /><link rel="prefetch" href="/assets/env.html.43a34f0a.js" as="script" /><link rel="prefetch" href="/assets/faq.html.87a25771.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.a43086da.js" as="script" /><link rel="prefetch" href="/assets/image.html.b8207dba.js" as="script" /><link rel="prefetch" href="/assets/mock.html.7bcda784.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.57c0d70d.js" as="script" /><link rel="prefetch" href="/assets/public.html.d7273595.js" as="script" /><link rel="prefetch" href="/assets/route.html.c7dee390.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.fe946664.js" as="script" /><link rel="prefetch" href="/assets/template.html.4eb696af.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.e16cacff.js" as="script" /><link rel="prefetch" href="/assets/api.html.86989a53.js" as="script" /><link rel="prefetch" href="/assets/cli.html.20a19bf9.js" as="script" /><link rel="prefetch" href="/assets/index.html.8898ddfd.js" as="script" /><link rel="prefetch" href="/assets/index.html.d41ee9ef.js" as="script" /><link rel="prefetch" href="/assets/index.html.febad599.js" as="script" /><link rel="prefetch" href="/assets/index.html.352c94f2.js" as="script" /><link rel="prefetch" href="/assets/index.html.7e87ba32.js" as="script" /><link rel="prefetch" href="/assets/access.html.690f343c.js" as="script" /><link rel="prefetch" href="/assets/editor.html.54257585.js" as="script" /><link rel="prefetch" href="/assets/enums.html.929d9a15.js" as="script" /><link rel="prefetch" href="/assets/icon.html.c7a02a4e.js" as="script" /><link rel="prefetch" href="/assets/jest.html.d036fe38.js" as="script" /><link rel="prefetch" href="/assets/layout.html.348e7bc9.js" as="script" /><link rel="prefetch" href="/assets/locale.html.e7f1188f.js" as="script" /><link rel="prefetch" href="/assets/login.html.0d5fe152.js" as="script" /><link rel="prefetch" href="/assets/model.html.81e99a8a.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.55b57270.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.5ecd56d6.js" as="script" /><link rel="prefetch" href="/assets/request.html.3a44f389.js" as="script" /><link rel="prefetch" href="/assets/sass.html.c39399e1.js" as="script" /><link rel="prefetch" href="/assets/swc.html.b149b839.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.80c22798.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.d141e81c.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.1c6d4ac0.js" as="script" /><link rel="prefetch" href="/assets/404.html.decb86ed.js" as="script" /><link rel="prefetch" href="/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="/" class=""><img class="logo" src="/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="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/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.2"><span class="title">v3.0.2</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.2"><span class="title">v3.0.2</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="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/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.2"><span class="title">v3.0.2</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.2"><span class="title">v3.0.2</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><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="router-link-active sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/dev/api.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="/reference/plugin/dev/api.html#api-paths" class="router-link-active router-link-exact-active sidebar-item" aria-label="api.paths"><!--[--><!--]--> api.paths <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#api-cwd" class="router-link-active router-link-exact-active sidebar-item" aria-label="api.cwd"><!--[--><!--]--> api.cwd <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#api-pkg" class="router-link-active router-link-exact-active sidebar-item" aria-label="api.pkg"><!--[--><!--]--> api.pkg <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#api-configinstance" class="router-link-active router-link-exact-active sidebar-item" aria-label="api.configInstance"><!--[--><!--]--> api.configInstance <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#userconfig" class="router-link-active router-link-exact-active sidebar-item" aria-label="userConfig"><!--[--><!--]--> userConfig <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#config" class="router-link-active router-link-exact-active sidebar-item" aria-label="config"><!--[--><!--]--> config <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#env" class="router-link-active router-link-exact-active sidebar-item" aria-label="env"><!--[--><!--]--> env <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#args" class="router-link-active router-link-exact-active sidebar-item" aria-label="args"><!--[--><!--]--> args <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/dev/api.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="/reference/plugin/dev/api.html#describe" class="router-link-active router-link-exact-active sidebar-item" aria-label="describe"><!--[--><!--]--> describe <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#register" class="router-link-active router-link-exact-active sidebar-item" aria-label="register"><!--[--><!--]--> register <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#applyplugins" class="router-link-active router-link-exact-active sidebar-item" aria-label="applyPlugins"><!--[--><!--]--> applyPlugins <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#registermethod" class="router-link-active router-link-exact-active sidebar-item" aria-label="registerMethod"><!--[--><!--]--> registerMethod <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#registercommand" class="router-link-active router-link-exact-active sidebar-item" aria-label="registerCommand"><!--[--><!--]--> registerCommand <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#registerpresets" class="router-link-active router-link-exact-active sidebar-item" aria-label="registerPresets"><!--[--><!--]--> registerPresets <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#registerplugins" class="router-link-active router-link-exact-active sidebar-item" aria-label="registerPlugins"><!--[--><!--]--> registerPlugins <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#hasplugins" class="router-link-active router-link-exact-active sidebar-item" aria-label="hasPlugins"><!--[--><!--]--> hasPlugins <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#haspresets" class="router-link-active router-link-exact-active sidebar-item" aria-label="hasPresets"><!--[--><!--]--> hasPresets <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#skipplugins" class="router-link-active router-link-exact-active sidebar-item" aria-label="skipPlugins"><!--[--><!--]--> skipPlugins <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/dev/api.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="/reference/plugin/dev/api.html#addpluginexports" class="router-link-active router-link-exact-active sidebar-item" aria-label="addPluginExports"><!--[--><!--]--> addPluginExports <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addcoreexports" class="router-link-active router-link-exact-active sidebar-item" aria-label="addCoreExports"><!--[--><!--]--> addCoreExports <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addruntimeplugin" class="router-link-active router-link-exact-active sidebar-item" aria-label="addRuntimePlugin"><!--[--><!--]--> addRuntimePlugin <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addruntimepluginkey" class="router-link-active router-link-exact-active sidebar-item" aria-label="addRuntimePluginKey"><!--[--><!--]--> addRuntimePluginKey <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addentryimportsahead" class="router-link-active router-link-exact-active sidebar-item" aria-label="addEntryImportsAhead"><!--[--><!--]--> addEntryImportsAhead <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addentryimports" class="router-link-active router-link-exact-active sidebar-item" aria-label="addEntryImports"><!--[--><!--]--> addEntryImports <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addentrycodeahead" class="router-link-active router-link-exact-active sidebar-item" aria-label="addEntryCodeAhead"><!--[--><!--]--> addEntryCodeAhead <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addentrycode" class="router-link-active router-link-exact-active sidebar-item" aria-label="addEntryCode"><!--[--><!--]--> addEntryCode <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addhtmlheadscripts" class="router-link-active router-link-exact-active sidebar-item" aria-label="addHTMLHeadScripts"><!--[--><!--]--> addHTMLHeadScripts <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addbeforemiddlewares" class="router-link-active router-link-exact-active sidebar-item" aria-label="addBeforeMiddlewares"><!--[--><!--]--> addBeforeMiddlewares <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addmiddlewares" class="router-link-active router-link-exact-active sidebar-item" aria-label="addMiddlewares"><!--[--><!--]--> addMiddlewares <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addtmpgeneratewatcherpaths" class="router-link-active router-link-exact-active sidebar-item" aria-label="addTmpGenerateWatcherPaths"><!--[--><!--]--> addTmpGenerateWatcherPaths <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#chainwebpack" class="router-link-active router-link-exact-active sidebar-item" aria-label="chainWebpack"><!--[--><!--]--> chainWebpack <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#copytmpfiles" class="router-link-active router-link-exact-active sidebar-item" aria-label="copyTmpFiles"><!--[--><!--]--> copyTmpFiles <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#getport" class="router-link-active router-link-exact-active sidebar-item" aria-label="getPort"><!--[--><!--]--> getPort <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#gethostname" class="router-link-active router-link-exact-active sidebar-item" aria-label="getHostname"><!--[--><!--]--> getHostname <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#getserver" class="router-link-active router-link-exact-active sidebar-item" aria-label="getServer"><!--[--><!--]--> getServer <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#getroutes" class="router-link-active router-link-exact-active sidebar-item" aria-label="getRoutes"><!--[--><!--]--> getRoutes <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#getroutesjson" class="router-link-active router-link-exact-active sidebar-item" aria-label="getRoutesJSON"><!--[--><!--]--> getRoutesJSON <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifyroutes" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyRoutes"><!--[--><!--]--> modifyRoutes <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifybundleconfigopts" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyBundleConfigOpts"><!--[--><!--]--> modifyBundleConfigOpts <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifybundleconfig" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyBundleConfig"><!--[--><!--]--> modifyBundleConfig <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifybabelopts" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyBabelOpts"><!--[--><!--]--> modifyBabelOpts <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifybabelpresetopts" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyBabelPresetOpts"><!--[--><!--]--> modifyBabelPresetOpts <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifypaths" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyPaths"><!--[--><!--]--> modifyPaths <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifydefaultconfig" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyDefaultConfig"><!--[--><!--]--> modifyDefaultConfig <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifyconfig" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyConfig"><!--[--><!--]--> modifyConfig <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifypublicpathstr" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyPublicPathStr"><!--[--><!--]--> modifyPublicPathStr <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#onpluginready" class="router-link-active router-link-exact-active sidebar-item" aria-label="onPluginReady"><!--[--><!--]--> onPluginReady <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#onstart" class="router-link-active router-link-exact-active sidebar-item" aria-label="onStart"><!--[--><!--]--> onStart <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#onexit" class="router-link-active router-link-exact-active sidebar-item" aria-label="onExit"><!--[--><!--]--> onExit <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#ongeneratefiles" class="router-link-active router-link-exact-active sidebar-item" aria-label="onGenerateFiles"><!--[--><!--]--> onGenerateFiles <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#restartserver" class="router-link-active router-link-exact-active sidebar-item" aria-label="restartServer"><!--[--><!--]--> restartServer <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#writetmpfile" class="router-link-active router-link-exact-active sidebar-item" aria-label="writeTmpFile"><!--[--><!--]--> writeTmpFile <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="插件-api" tabindex="-1"><a class="header-anchor" href="#插件-api" aria-hidden="true">#</a> 插件 API</h1><h2 id="属性" tabindex="-1"><a class="header-anchor" href="#属性" aria-hidden="true">#</a> 属性</h2><h3 id="api-paths" tabindex="-1"><a class="header-anchor" href="#api-paths" aria-hidden="true">#</a> api.paths</h3><p>一些关键的路径：</p><ul><li>cwd，执行命令的绝对路径</li><li>absNodeModulesPath，nodeModule 的绝对路径</li><li>absOutputPath，输出 <code>build</code> 产物的绝对路径</li><li>absSrcPath，<code>src</code> 目录的绝对路径</li><li>absPagesPath，<code>pages</code>目录的绝对路径</li><li>absTmpPath，<code>.fes</code>临时文件目录的绝对路径</li></ul><h3 id="api-cwd" tabindex="-1"><a class="header-anchor" href="#api-cwd" aria-hidden="true">#</a> api.cwd</h3><p>执行命令的绝对路径</p><h3 id="api-pkg" tabindex="-1"><a class="header-anchor" href="#api-pkg" aria-hidden="true">#</a> api.pkg</h3><p><code>package.json</code>的内容</p><h3 id="api-configinstance" tabindex="-1"><a class="header-anchor" href="#api-configinstance" aria-hidden="true">#</a> api.configInstance</h3><p><code>config</code>实例</p><h3 id="userconfig" tabindex="-1"><a class="header-anchor" href="#userconfig" aria-hidden="true">#</a> userConfig</h3><p>用户配置</p><h3 id="config" tabindex="-1"><a class="header-anchor" href="#config" aria-hidden="true">#</a> config</h3><p>插件配置可被修改，此为最终的配置</p><h3 id="env" tabindex="-1"><a class="header-anchor" href="#env" aria-hidden="true">#</a> env</h3><p>p<wbr>rocess.env</p><h3 id="args" tabindex="-1"><a class="header-anchor" href="#args" aria-hidden="true">#</a> args</h3><p>环境变量</p><h2 id="核心方法" tabindex="-1"><a class="header-anchor" href="#核心方法" aria-hidden="true">#</a> 核心方法</h2><h3 id="describe" tabindex="-1"><a class="header-anchor" href="#describe" aria-hidden="true">#</a> describe</h3><p>注册阶段执行，用于描述插件或插件集的 id、key、配置信息、启用方式等。</p><p>用法：<strong>describe({ id?: string, key?: string, config?: { default, schema, onChange } }, enableBy?)</strong></p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'esbuild'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token function">schema</span><span class="token punctuation">(</span><span class="token parameter">joi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> joi<span class="token punctuation">.</span><span class="token function">object</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>
|
||
<span class="token keyword">default</span><span class="token operator">:</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>
|
||
<span class="token literal-property property">enableBy</span><span class="token operator">:</span> api<span class="token punctuation">.</span>EnableBy<span class="token punctuation">.</span>config<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 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>注：</p><ul><li><code>config.default</code> 为配置的默认值，用户没有配置时取这个</li><li><code>config.schema</code> 用于声明配置的类型，基于 <a href="https://hapi.dev/module/joi" target="_blank" rel="noopener noreferrer">joi<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><code>config.onChange</code> 是 <code>dev</code> 阶段配置被修改后的处理机制，默认会重启 dev 进程，也可以修改为 api.ConfigChangeType.regenerateTmpFiles 只重新生成临时文件，还可以通过函数的格式自定义</li><li><code>enableBy</code> 为启用方式，默认是注册启用，可更改为 <code>api.EnableBy.config</code>，还可以用自定义函数的方式决定其启用时机（动态生效）</li></ul><h3 id="register" tabindex="-1"><a class="header-anchor" href="#register" aria-hidden="true">#</a> register</h3><p>为 api.applyPlugins 注册可供其使用的 hook。</p><p>用法：<strong>register({ key: string, fn: Function, pluginId?: string, before?: string, stage?: number })</strong></p><p>参数：</p><ul><li>key：唯一 id</li><li>fn：hook 函数，当执行<code>api.applyPlugins</code>时，此函数被执行。</li><li>pluginId：插件 id，如果配置了插件 id，则只有此插件未被禁用时，才会执行。</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 可同步</span>
|
||
api<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>
|
||
<span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token string">'a'</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><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 可异步</span>
|
||
api<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>
|
||
<span class="token keyword">async</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">await</span> <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token string">'b'</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><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 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 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 class="line-number"></div></div></div><p>注意：</p><ul><li>fn 支持同步和异步，异步通过 Promise，返回值为 Promise 即为异步</li><li>fn 里的内容需结合 <code>api.appyPlugins</code> 的 <code>type</code> 参数来看,如果是 <code>api.ApplyPluginsType.add</code>，需有返回值，这些返回值最终会被合成一个数组。如果是 <code>api.ApplyPluginsType.modify</code>，需对第一个参数做修改，并返回它，它会作为下个 hook 的参数。 如果是 <code>api.ApplyPluginsType.event</code>，无需返回值</li><li>stage 和 before 都是用于调整执行顺序的，参考 tapable</li><li>stage 默认是 0，设为 -1 或更少会提前执行，设为 1 或更多会后置执行</li></ul><h3 id="applyplugins" tabindex="-1"><a class="header-anchor" href="#applyplugins" aria-hidden="true">#</a> applyPlugins</h3><p>取得 register 注册的 hooks 执行后的数据。</p><p>用法：<strong>applyPlugins({ key: string, type: api.ApplyPluginsType, initialValue?: any, args?: any })</strong></p><p>参数：</p><ul><li>key：唯一 id</li><li>type：hook 的类型。</li><li>initialValue：初始值。</li><li>args：参数，hook 函数执行时，args 会作为参数传入。</li></ul><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token keyword">await</span> api<span class="token punctuation">.</span><span class="token function">applyPlugins</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">type</span><span class="token operator">:</span> api<span class="token punctuation">.</span>ApplyPluginsType<span class="token punctuation">.</span>add<span class="token punctuation">,</span>
|
||
<span class="token literal-property property">initialValue</span><span class="token operator">:</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><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['a', 'b']</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 class="line-number"></div></div></div><h4 id="api-applypluginstype" tabindex="-1"><a class="header-anchor" href="#api-applypluginstype" aria-hidden="true">#</a> api.ApplyPluginsType</h4><p>编译时插件 hook 执行类型，enum 类型，包含三个属性：</p><ul><li>compose，用于合并执行多个函数，函数可决定前序函数的执行时机</li><li>modify，用于修改值</li><li>event，用于执行事件，前面没有依赖关系</li></ul><h3 id="registermethod" tabindex="-1"><a class="header-anchor" href="#registermethod" aria-hidden="true">#</a> registerMethod</h3><p>往 <code>api</code> 上注册方法。如果有提供 <code>fn</code>，则执行 <code>fn</code> 定义的函数。</p><p>用法：<strong>registerMethod({ name: string, fn?: Function, exitsError?: boolean })</strong></p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerMethod</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'writeTmpFile'</span><span class="token punctuation">,</span>
|
||
<span class="token function">fn</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> path<span class="token punctuation">,</span> content <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">assert</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>stage <span class="token operator">>=</span> api<span class="token punctuation">.</span>ServiceStage<span class="token punctuation">.</span>pluginReady<span class="token punctuation">,</span> <span class="token string">'api.writeTmpFile() should not execute in register stage.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> absPath <span class="token operator">=</span> <span class="token function">join</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>paths<span class="token punctuation">.</span>absTmpPath<span class="token punctuation">,</span> path<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
api<span class="token punctuation">.</span>utils<span class="token punctuation">.</span>mkdirp<span class="token punctuation">.</span><span class="token function">sync</span><span class="token punctuation">(</span><span class="token function">dirname</span><span class="token punctuation">(</span>absPath<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">existsSync</span><span class="token punctuation">(</span>absPath<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token function">readFileSync</span><span class="token punctuation">(</span>absPath<span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span> <span class="token operator">!==</span> content<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">writeFileSync</span><span class="token punctuation">(</span>absPath<span class="token punctuation">,</span> content<span class="token punctuation">,</span> <span class="token string">'utf-8'</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>
|
||
<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 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 class="line-number"></div></div></div><p>然后在插件中可以使用：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">writeTmpFile</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></div><h3 id="registercommand" tabindex="-1"><a class="header-anchor" href="#registercommand" aria-hidden="true">#</a> registerCommand</h3><p>注册命令，基于 <a href="https://github.com/tj/commander.js/" target="_blank" rel="noopener noreferrer">commander<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> 实现的机制。</p><p>用法：<strong>registerCommand({ command: string, description: string, fn: Function, options?: Object })</strong></p><p>参数：</p><ul><li>command</li><li>description，描述文字，输入 <code>--help</code> 会打印</li><li>fn，命令执行的函数，参数有： <ul><li>rawArgv，原始参数</li><li>args，参数</li><li>options，执行命令时附带的的参数配置</li><li>program，commander 对象</li></ul></li><li>options，参数配置，基于 <a href="https://github.com/tj/commander.js/" target="_blank" rel="noopener noreferrer">commander<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><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerCommand</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">command</span><span class="token operator">:</span> <span class="token string">'webpack'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect webpack configurations'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--rule <ruleName>'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect a specific module rule'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--plugin <pluginName>'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect a specific plugin'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--rules'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'list all module rule names'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--plugins'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'list all plugin names'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--verbose'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'show full function definitions in output'</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>
|
||
<span class="token keyword">async</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> rawArgv<span class="token punctuation">,</span> args<span class="token punctuation">,</span> options<span class="token punctuation">,</span> program <span class="token punctuation">}</span></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><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 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 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 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 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 class="line-number"></div><div class="line-number"></div></div></div><p>当项目引入此插件后，使用：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes webpack
|
||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="registerpresets" tabindex="-1"><a class="header-anchor" href="#registerpresets" aria-hidden="true">#</a> registerPresets</h3><p>注册插件集，参数为路径数组。</p><p>用法：<strong>registerPresets(presets: string[])</strong></p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerPresets</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'preset_2'</span><span class="token punctuation">,</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'preset2'</span><span class="token punctuation">,</span> <span class="token function-variable function">apply</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'./preset_3'</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></div><h3 id="registerplugins" tabindex="-1"><a class="header-anchor" href="#registerplugins" aria-hidden="true">#</a> registerPlugins</h3><p>注册插件，参数为路径数组。</p><p>用法：<strong>registerPlugins(plugins: string[])</strong></p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'preset_2'</span><span class="token punctuation">,</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'preset2'</span><span class="token punctuation">,</span> <span class="token function-variable function">apply</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'./preset_3'</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></div><h3 id="hasplugins" tabindex="-1"><a class="header-anchor" href="#hasplugins" aria-hidden="true">#</a> hasPlugins</h3><p>判断是否有注册某个插件，插件的 id 规则：</p><ul><li>id 默认为包名</li><li>内置插件以 <code>@@</code> 为前缀，比如 <code>@@/registerMethod</code></li></ul><p>用法：<strong>hasPlugins(pluginIds: string[])</strong></p><p>例如</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 判断是否有注册 @fesjs/plugin-locale</span>
|
||
api<span class="token punctuation">.</span><span class="token function">hasPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'@fesjs/plugin-locale'</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></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果在注册阶段使用，只能判断在他之前是否有注册某个插件。</p></div><h3 id="haspresets" tabindex="-1"><a class="header-anchor" href="#haspresets" aria-hidden="true">#</a> hasPresets</h3><p>判断是否有注册某个插件集。</p><p>用法：<strong>hasPresets(presetIds: string[])</strong></p><p>例如</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 判断是否有注册</span>
|
||
api<span class="token punctuation">.</span><span class="token function">hasPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'@fesjs/preset-xxx'</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></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果在注册阶段使用，只能判断在他之前是否有注册某个插件集。</p></div><h3 id="skipplugins" tabindex="-1"><a class="header-anchor" href="#skipplugins" aria-hidden="true">#</a> skipPlugins</h3><p>声明哪些插件需要被禁用，参数为插件 id 的数组。</p><p>用法：<strong>hasPresets(presetIds: string[])</strong></p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 禁用 plugin-model 插件</span>
|
||
api<span class="token punctuation">.</span><span class="token function">skipPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'@fesjs/plugin-model'</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></div><h2 id="扩展方法" tabindex="-1"><a class="header-anchor" href="#扩展方法" aria-hidden="true">#</a> 扩展方法</h2><p>通过 api.registerMethod() 扩展的方法。</p><h3 id="addpluginexports" tabindex="-1"><a class="header-anchor" href="#addpluginexports" aria-hidden="true">#</a> addPluginExports</h3><p>把插件需要导出的运行时 API 写入<code>@fesjs/fes</code>。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addPluginExports</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">specifiers</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'access'</span><span class="token punctuation">,</span> <span class="token string">'useAccess'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">source</span><span class="token operator">:</span> absoluteFilePath<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><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 class="line-number"></div></div></div><p>这样用户使用时：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access<span class="token punctuation">,</span> useAccess <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>
|
||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="addcoreexports" tabindex="-1"><a class="header-anchor" href="#addcoreexports" aria-hidden="true">#</a> addCoreExports</h3><p>提供给其他插件运行时需要的 API。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addCoreExports</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">specifiers</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'getRoutes'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">source</span><span class="token operator">:</span> absCoreFilePath<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><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 class="line-number"></div></div></div><p>使用：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getHistory<span class="token punctuation">,</span> destroyRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@@/core/coreExports'</span><span class="token punctuation">;</span>
|
||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="addruntimeplugin" tabindex="-1"><a class="header-anchor" href="#addruntimeplugin" aria-hidden="true">#</a> addRuntimePlugin</h3><p>添加运行时插件，返回值格式为表示文件路径的字符串。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addRuntimePlugin</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./runtime'</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></div><h3 id="addruntimepluginkey" tabindex="-1"><a class="header-anchor" href="#addruntimepluginkey" aria-hidden="true">#</a> addRuntimePluginKey</h3><p>添加插件提供的运行时配置的 key，返回值格式为字符串。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addRuntimePluginKey</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">'some'</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></div><p>则用户可以：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// app.js</span>
|
||
<span class="token keyword">const</span> <span class="token function-variable function">some</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</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></div><h3 id="addentryimportsahead" tabindex="-1"><a class="header-anchor" href="#addentryimportsahead" aria-hidden="true">#</a> addEntryImportsAhead</h3><p>在入口文件现有 import 的前面添加 import。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryImportsAhead</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">'anypackage'</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></div><h3 id="addentryimports" tabindex="-1"><a class="header-anchor" href="#addentryimports" aria-hidden="true">#</a> addEntryImports</h3><p>在入口文件现有 import 的后面添加 import。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryImport</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">'/modulePath/xxx.js'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">specifier</span><span class="token operator">:</span> <span class="token string">'moduleName'</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>
|
||
<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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addentrycodeahead" tabindex="-1"><a class="header-anchor" href="#addentrycodeahead" aria-hidden="true">#</a> addEntryCodeAhead</h3><p>在入口文件最前面（import 之后）添加代码。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryCodeAhead</span><span class="token punctuation">(</span>
|
||
<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>globalCSSFile
|
||
<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">file</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">require('</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">winPath</span><span class="token punctuation">(</span><span class="token function">relative</span><span class="token punctuation">(</span>absTmpPath<span class="token punctuation">,</span> file<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">');</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></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><h3 id="addentrycode" tabindex="-1"><a class="header-anchor" href="#addentrycode" aria-hidden="true">#</a> addEntryCode</h3><p>在入口文件最后添加代码。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryCode</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">console.log('works!')</span><span class="token template-punctuation string">`</span></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></div><h3 id="addhtmlheadscripts" tabindex="-1"><a class="header-anchor" href="#addhtmlheadscripts" aria-hidden="true">#</a> addHTMLHeadScripts</h3><p>在 HTML 头部添加脚本。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addHTMLHeadScripts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// ...attrs</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><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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addbeforemiddlewares" tabindex="-1"><a class="header-anchor" href="#addbeforemiddlewares" aria-hidden="true">#</a> addBeforeMiddlewares</h3><p>添加在 <code>webpack compiler</code> 中间件之前的中间件，返回值格式为 <code>express</code> 中间件。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addBeforeMiddlewares</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'end'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||
<span class="token function">next</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><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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addmiddlewares" tabindex="-1"><a class="header-anchor" href="#addmiddlewares" aria-hidden="true">#</a> addMiddlewares</h3><p>添加在 <code>webpack compiler</code> 中间件之后的中间件，返回值格式为 <code>express</code> 中间件。</p><h3 id="addtmpgeneratewatcherpaths" tabindex="-1"><a class="header-anchor" href="#addtmpgeneratewatcherpaths" aria-hidden="true">#</a> addTmpGenerateWatcherPaths</h3><p>添加重新生成临时文件的监听路径。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addTmpGenerateWatcherPaths</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token string">'./app.js'</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></div><h3 id="chainwebpack" tabindex="-1"><a class="header-anchor" href="#chainwebpack" aria-hidden="true">#</a> chainWebpack</h3><p>通过 [webpack-chain] 的方式修改 webpack 配置。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
memo<span class="token punctuation">.</span>resolve<span class="token punctuation">.</span>alias<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'vue-i18n'</span><span class="token punctuation">,</span> <span class="token string">'vue-i18n/dist/vue-i18n.esm-bundler.js'</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></div><h3 id="copytmpfiles" tabindex="-1"><a class="header-anchor" href="#copytmpfiles" aria-hidden="true">#</a> copyTmpFiles</h3><p>批量写临时文件。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">copyTmpFiles</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
namespace<span class="token punctuation">,</span>
|
||
<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'runtime'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">ignore</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'.tpl'</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>参数：</p><ul><li>namespace：复制到临时文件夹下的目标目录</li><li>path：需要复制的文件目录</li><li>ignore：需要排除的文件</li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不能在注册阶段使用，通常放在 api.onGenerateFiles() 里，这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理，如果内容一致，不会做写的操作，以减少触发 <code>webpack</code> 的重新编译</p></div><h3 id="getport" tabindex="-1"><a class="header-anchor" href="#getport" aria-hidden="true">#</a> getPort</h3><p>获取端口号，dev 时有效。</p><h3 id="gethostname" tabindex="-1"><a class="header-anchor" href="#gethostname" aria-hidden="true">#</a> getHostname</h3><p>获取 hostname，dev 时有效。</p><h3 id="getserver" tabindex="-1"><a class="header-anchor" href="#getserver" aria-hidden="true">#</a> getServer</h3><p>获取 devServer，dev 时有效。</p><h3 id="getroutes" tabindex="-1"><a class="header-anchor" href="#getroutes" aria-hidden="true">#</a> getRoutes</h3><p>获取 <code>api.modifyRoutes</code> 修改过后的路由信息。</p><h3 id="getroutesjson" tabindex="-1"><a class="header-anchor" href="#getroutesjson" aria-hidden="true">#</a> getRoutesJSON</h3><p>获取格式化后的路由信息</p><h3 id="modifyroutes" tabindex="-1"><a class="header-anchor" href="#modifyroutes" aria-hidden="true">#</a> modifyRoutes</h3><p>修改路由。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 把BaseLayout插入到路由配置中，作为根路由</span>
|
||
api<span class="token punctuation">.</span><span class="token function">modifyRoutes</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">routes</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">winPath</span><span class="token punctuation">(</span><span class="token function">join</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>paths<span class="token punctuation">.</span>absTmpPath <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">,</span> absFilePath<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">children</span><span class="token operator">:</span> routes<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><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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifybundleconfigopts" tabindex="-1"><a class="header-anchor" href="#modifybundleconfigopts" aria-hidden="true">#</a> modifyBundleConfigOpts</h3><p>修改获取 bundleConfig 的函数参数。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBundleConfigOpts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
memo<span class="token punctuation">.</span>miniCSSExtractPluginPath <span class="token operator">=</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'mini-css-extract-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
memo<span class="token punctuation">.</span>miniCSSExtractPluginLoaderPath <span class="token operator">=</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'mini-css-extract-plugin/dist/loader'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> memo<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><h3 id="modifybundleconfig" tabindex="-1"><a class="header-anchor" href="#modifybundleconfig" aria-hidden="true">#</a> modifyBundleConfig</h3><p>修改 bundle 配置。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBundleConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">bundleConfig</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// do something</span>
|
||
<span class="token keyword">return</span> bundleConfig<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><h3 id="modifybabelopts" tabindex="-1"><a class="header-anchor" href="#modifybabelopts" aria-hidden="true">#</a> modifyBabelOpts</h3><p>修改 babel 配置项。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBabelOpts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">babelOpts</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>api<span class="token punctuation">.</span>config<span class="token punctuation">.</span>babelPluginImport<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
api<span class="token punctuation">.</span>config<span class="token punctuation">.</span>babelPluginImport<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
babelOpts<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'import'</span><span class="token punctuation">,</span> config<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><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> babelOpts<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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifybabelpresetopts" tabindex="-1"><a class="header-anchor" href="#modifybabelpresetopts" aria-hidden="true">#</a> modifyBabelPresetOpts</h3><p>修改 babel 插件的配置。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBabelPresetOpts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">opts</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
<span class="token operator">...</span>opts<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><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><h3 id="modifypaths" tabindex="-1"><a class="header-anchor" href="#modifypaths" aria-hidden="true">#</a> modifyPaths</h3><p>修改 paths 对象。</p><h3 id="modifydefaultconfig" tabindex="-1"><a class="header-anchor" href="#modifydefaultconfig" aria-hidden="true">#</a> modifyDefaultConfig</h3><p>修改默认配置。 例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyDefaultConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
<span class="token operator">...</span>memo<span class="token punctuation">,</span>
|
||
<span class="token operator">...</span>defaultOptions<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><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 class="line-number"></div></div></div><h3 id="modifyconfig" tabindex="-1"><a class="header-anchor" href="#modifyconfig" aria-hidden="true">#</a> modifyConfig</h3><p>修改最终配置。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
<span class="token operator">...</span>memo<span class="token punctuation">,</span>
|
||
<span class="token operator">...</span>defaultOptions<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><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 class="line-number"></div></div></div><h3 id="modifypublicpathstr" tabindex="-1"><a class="header-anchor" href="#modifypublicpathstr" aria-hidden="true">#</a> modifyPublicPathStr</h3><p>修改 publicPath 字符串。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyPublicPathStr</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> api<span class="token punctuation">.</span>config<span class="token punctuation">.</span>publicPath <span class="token operator">||</span> <span class="token string">'/'</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></div><h3 id="onpluginready" tabindex="-1"><a class="header-anchor" href="#onpluginready" aria-hidden="true">#</a> onPluginReady</h3><p>在插件初始化完成触发。在 onStart 之前，此时还没有 config 和 paths，他们尚未解析好。</p><h3 id="onstart" tabindex="-1"><a class="header-anchor" href="#onstart" aria-hidden="true">#</a> onStart</h3><p>在命令注册函数执行前触发。可以使用 config 和 paths。</p><h3 id="onexit" tabindex="-1"><a class="header-anchor" href="#onexit" aria-hidden="true">#</a> onExit</h3><p>dev 退出时触发。</p><h3 id="ongeneratefiles" tabindex="-1"><a class="header-anchor" href="#ongeneratefiles" aria-hidden="true">#</a> onGenerateFiles</h3><p>生成临时文件，触发时机在 webpack 编译之前。</p><h3 id="restartserver" tabindex="-1"><a class="header-anchor" href="#restartserver" aria-hidden="true">#</a> restartServer</h3><p>重启 devServer，dev 时有效。</p><h3 id="writetmpfile" tabindex="-1"><a class="header-anchor" href="#writetmpfile" aria-hidden="true">#</a> writeTmpFile</h3><p>写临时文件。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">writeTmpFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">path</span><span class="token operator">:</span> absoluteFilePath<span class="token punctuation">,</span>
|
||
<span class="token literal-property property">content</span><span class="token operator">:</span> Mustache<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'runtime/core.tpl'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
<span class="token constant">REPLACE_ROLES</span><span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>roles<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>
|
||
<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 class="line-number"></div></div></div><p>参数：</p><ul><li>path：相对于临时文件夹的路径</li><li>content：文件内容</li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不能在注册阶段使用，通常放在 api.onGenerateFiles() 里，这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理，如果内容一致，不会做写的操作，以减少触发 webpack 的重新编译</p></div></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/reference/plugin/dev/api.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: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/dev/" class="router-link-active" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a></span><!----></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div>
|
||
<script type="module" src="/assets/app.f1ba41a1.js" defer></script>
|
||
</body>
|
||
</html>
|