blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-06 03:59:53 +08:00
Code Issues Projects Releases Wiki Activity
fes.js/assets/api.html.d2c39420.js

197 lines
69 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

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

import{_ as e,r as i,o,c,b as n,d as a,a as p,f as t}from"./app.136d0839.js";const l={},u=t(`<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">&#39;esbuild&#39;</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>`,26),r=n("li",null,[n("code",null,"config.default"),a(" 为配置的默认值，用户没有配置时取这个")],-1),d=n("code",null,"config.schema",-1),k={href:"https://hapi.dev/module/joi",target:"_blank",rel:"noopener noreferrer"},v=n("li",null,[n("code",null,"config.onChange"),a(" 是 "),n("code",null,"dev"),a(" 阶段配置被修改后的处理机制，默认会重启 dev 进程，也可以修改为 api.ConfigChangeType.regenerateTmpFiles 只重新生成临时文件，还可以通过函数的格式自定义")],-1),m=n("li",null,[n("code",null,"enableBy"),a(" 为启用方式，默认是注册启用，可更改为 "),n("code",null,"api.EnableBy.config"),a("，还可以用自定义函数的方式决定其启用时机（动态生效）")],-1),h=t(`<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">&#39;foo&#39;</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">&#39;a&#39;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><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">&#39;foo&#39;</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">&#39;b&#39;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><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">&#39;foo&#39;</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">// [&#39;a&#39;, &#39;b&#39;]</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">&#39;writeTmpFile&#39;</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">&gt;=</span> api<span class="token punctuation">.</span>ServiceStage<span class="token punctuation">.</span>pluginReady<span class="token punctuation">,</span> <span class="token string">&#39;api.writeTmpFile() should not execute in register stage.&#39;</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">&#39;utf-8&#39;</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">&#39;utf-8&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<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>`,26),g={href:"https://github.com/tj/commander.js/",target:"_blank",rel:"noopener noreferrer"},b=n("p",null,[a("用法："),n("strong",null,"registerCommand({ command: string, description: string, fn: Function, options?: Object })")],-1),f=n("p",null,"参数：",-1),y=n("li",null,"command",-1),j=n("li",null,[a("description，描述文字，输入 "),n("code",null,"--help"),a(" 会打印")],-1),x=n("li",null,[a("fn，命令执行的函数，参数有： "),n("ul",null,[n("li",null,"rawArgv，原始参数"),n("li",null,"args，参数"),n("li",null,"options，执行命令时附带的的参数配置"),n("li",null,"program，commander 对象")])],-1),P={href:"https://github.com/tj/commander.js/",target:"_blank",rel:"noopener noreferrer"},w=t(`<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">&#39;webpack&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">&#39;inspect webpack configurations&#39;</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">&#39;--rule &lt;ruleName&gt;&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">&#39;inspect a specific module rule&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;--plugin &lt;pluginName&gt;&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">&#39;inspect a specific plugin&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;--rules&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">&#39;list all module rule names&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;--plugins&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">&#39;list all plugin names&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;--verbose&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">&#39;show full function definitions in output&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<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">&#39;preset_2&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;preset2&#39;</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">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</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">&#39;./preset_3&#39;</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></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">&#39;preset_2&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;preset2&#39;</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">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</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">&#39;./preset_3&#39;</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></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">&#39;@fesjs/plugin-locale&#39;</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">&#39;@fesjs/preset-xxx&#39;</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">&#39;@fesjs/plugin-model&#39;</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">=&gt;</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">&#39;access&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;useAccess&#39;</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">&#39;@fesjs/fes&#39;</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">=&gt;</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">&#39;getRoutes&#39;</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">&#39;@@/core/coreExports&#39;</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">=&gt;</span> <span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&#39;./runtime&#39;</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">=&gt;</span> <span class="token string">&#39;some&#39;</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">=&gt;</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">&#39;anypackage&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></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">=&gt;</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">&#39;/modulePath/xxx.js&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">specifier</span><span class="token operator">:</span> <span class="token string">&#39;moduleName&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<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">=&gt;</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">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">require(&#39;</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">&#39;);</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">&#39;&#39;</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">=&gt;</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(&#39;works!&#39;)</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">=&gt;</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">&#39;&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</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">=&gt;</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">=&gt;</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">&#39;end&#39;</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">=&gt;</span> <span class="token punctuation">[</span><span class="token string">&#39;./app.js&#39;</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">=&gt;</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">&#39;vue-i18n&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;vue-i18n/dist/vue-i18n.esm-bundler.js&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></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">&#39;runtime&#39;</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">&#39;.tpl&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>参数：</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">=&gt;</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">&#39;/&#39;</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">&#39;&#39;</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">=&gt;</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">&#39;mini-css-extract-plugin&#39;</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">&#39;mini-css-extract-plugin/dist/loader&#39;</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">=&gt;</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">=&gt;</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">=&gt;</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">&#39;import&#39;</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">=&gt;</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">=&gt;</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">=&gt;</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">=&gt;</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">&#39;/&#39;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></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">&#39;runtime/core.tpl&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">&#39;utf-8&#39;</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>`,154);function _(C,S){const s=i("ExternalLinkIcon");return o(),c("div",null,[u,n("ul",null,[r,n("li",null,[d,a(" 用于声明配置的类型，基于 "),n("a",k,[a("joi"),p(s)]),a("，如果你希望用户进行配置，这个是必须的，否则用户的配置无效")]),v,m]),h,n("p",null,[a("注册命令，基于 "),n("a",g,[a("commander"),p(s)]),a(" 实现的机制。")]),b,f,n("ul",null,[y,j,x,n("li",null,[a("options，参数配置，基于 "),n("a",P,[a("commander"),p(s)]),a(" 。")])]),w])}const T=e(l,[["render",_],["__file","api.html.vue"]]);export{T as default};
Reference in New Issue View Git Blame Copy Permalink