fes.js/assets/js/v-494b840e.3219979d.js

"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[861],{4794:(a,n,s)=>{s.r(n),s.d(n,{data:()=>e});const e={key:"v-494b840e",path:"/reference/plugin/dev/",title:"插件介绍",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"开始",slug:"开始",children:[]},{level:2,title:"创建插件",slug:"创建插件",children:[]},{level:2,title:"发布到 npm",slug:"发布到-npm",children:[]}],filePathRelative:"reference/plugin/dev/README.md",git:{updatedTime:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},2754:(a,n,s)=>{s.r(n),s.d(n,{default:()=>c});const e=(0,s(6252).uE)('<h1 id="插件介绍" tabindex="-1"><a class="header-anchor" href="#插件介绍" aria-hidden="true">#</a> 插件介绍</h1><h2 id="开始" tabindex="-1"><a class="header-anchor" href="#开始" aria-hidden="true">#</a> 开始</h2><p>一个插件是一个 <code>npm</code> 包，它能够为 Fes.js 创建的项目添加额外的功能，这些功能包括：</p><ul><li>项目的 webpack 配置。</li><li>修改项目的 babel 配置。</li><li>添加新的 fes 命令 - 例如 <code>@fes/plugin-jest</code> 添加了 <code>fes test</code> 命令，允许开发者运行单元测试。</li><li>集成 Vue 的插件。</li><li>修改路由配置</li><li>提供运行时 API</li><li>...</li></ul><p>插件的入口是一个函数，函数会以 API 对象作为第一个参数：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter">api</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>\n    api<span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n        <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>\n        <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n            <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>\n                <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>\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\n            <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <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>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>API 对象是构建流程管理 Service 类的实例，api 提供一些有用的方法帮助你开发插件。</p><p><code>api.describe</code>用来描述插件：</p><ul><li><strong>key</strong>， 插件的 <code>key</code>，可以理解为插件的名称，在 <code>.fes.js</code> 中用 <code>key</code> 配置此插件。</li><li><strong>config</strong>，插件的配置信息： <ul><li>schema，定义配置的类型</li><li>default，默认配置</li></ul></li><li><strong>enableBy</strong>， 是否开启插件，可配置某些场景下禁用插件。</li></ul><h2 id="创建插件" tabindex="-1"><a class="header-anchor" href="#创建插件" aria-hidden="true">#</a> 创建插件</h2><h5 id="第一步-安装create-fes-app" tabindex="-1"><a class="header-anchor" href="#第一步-安装create-fes-app" aria-hidden="true">#</a> 第一步：安装<code>create-fes-app</code></h5><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> i <span class="token parameter variable">-g</span> @fesjs/create-fes-app\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h5 id="第二步-创建插件项目" tabindex="-1"><a class="header-anchor" href="#第二步-创建插件项目" aria-hidden="true">#</a> 第二步：创建插件项目</h5><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>create-fes-app pluginName\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>在询问<code>Pick an template</code>时选择<code>Plugin</code>!</p><h5 id="第三步-进入插件目录-安装依赖" tabindex="-1"><a class="header-anchor" href="#第三步-进入插件目录-安装依赖" aria-hidden="true">#</a> 第三步：进入插件目录 &amp; 安装依赖</h5><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token builtin class-name">cd</span> pluginName <span class="token operator">&amp;</span> <span class="token function">yarn</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h5 id="第四步-启动编译" tabindex="-1"><a class="header-anchor" href="#第四步-启动编译" aria-hidden="true">#</a> 第四步：启动编译</h5><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">yarn</span> dev\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h5 id="第五步-使用插件api完成你的插件-可以参考其他插件理解api用法和场景" tabindex="-1"><a class="header-anchor" href="#第五步-使用插件api完成你的插件-可以参考其他插件理解api用法和场景" aria-hidden="true">#</a> 第五步：使用插件API完成你的插件！（可以参考其他插件理解api用法和场景）</h5><h2 id="发布到-npm" tabindex="-1"><a class="header-anchor" href="#发布到-npm" aria-hidden="true">#</a> 发布到 npm</h2><p>以 <code>@fesjs/preset-</code>、<code>@fesjs/plugin-</code>、<code>@webank/fes-preset-</code>、<code>@webank/fes-plugin-</code>、<code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头的依赖会被 Fes.js 自动注册为插件或插件集。</p><p>所以编写好的插件想发布到 npm 供其他人使用，包名必须是 <code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头。</p>',23),p={},c=(0,s(3744).Z)(p,[["render",function(a,n){return e}]])},3744:(a,n)=>{n.Z=(a,n)=>{const s=a.__vccOpts||a;for(const[a,e]of n)s[a]=e;return s}}}]);