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/index.html.c22810d3.js

119 lines
44 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 p,r as l,o,c as i,b as n,d as s,a as e,f as t}from"./app.005e0daf.js";const c={},r=t(`<h2 id="配置文件" tabindex="-1"><a class="header-anchor" href="#配置文件" aria-hidden="true">#</a> 配置文件</h2><p>Fes.js 内置了比较通用的构建方式，如果没有个性化需求，不需要修改构建相关的配置。</p><h3 id="配置文件解析" tabindex="-1"><a class="header-anchor" href="#配置文件解析" aria-hidden="true">#</a> 配置文件解析</h3><p>Fes.js 会自动解析项目根目录下的 <code>.fes.js</code> 文件。</p><p>最基础的配置文件是这样的：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// .fes.js</span>
<span class="token keyword">export</span> <span class="token keyword">default</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><p>可以通过环境变量 <code>FES_ENV</code> 进行环境差异化配置，当我们运行 <code>FES_ENV=prod fes dev</code> 时，Fes.js 会找到 <code>.fes.js</code> 和 <code>.fes.prod.js</code>(可选) 的配置文件进行 <code>deepmerge</code>。</p><h3 id="配置智能提示" tabindex="-1"><a class="header-anchor" href="#配置智能提示" aria-hidden="true">#</a> 配置智能提示</h3><p>可以通过 <code>defineBuildConfig</code> 工具函数获取类型提示：</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> defineBuildConfig <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>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineBuildConfig</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><h2 id="共享配置" tabindex="-1"><a class="header-anchor" href="#共享配置" aria-hidden="true">#</a> 共享配置</h2><h3 id="alias" tabindex="-1"><a class="header-anchor" href="#alias" aria-hidden="true">#</a> alias</h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{}</code></p></li><li><p>详情：</p><p>配置别名，对引用路径进行映射。</p></li><li><p>示例：</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token string">&#39;src/assets/styles/main&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后 <code>import(&#39;main&#39;)</code>，实际上是 <code>import(&#39;src/assets/styles/main&#39;)</code>。</p><h3 id="autoprefixer" tabindex="-1"><a class="header-anchor" href="#autoprefixer" aria-hidden="true">#</a> autoprefixer</h3><ul><li>类型： <code>object</code></li><li>默认值：</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
<span class="token literal-property property">flexbox</span><span class="token operator">:</span> <span class="token string">&#39;no-2009&#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 class="line-number"></div><div class="line-number"></div></div></div>`,18),d=n("p",null,"详情：",-1),u={href:"https://github.com/postcss/autoprefixer#options",target:"_blank",rel:"noopener noreferrer"},k=t(`<h3 id="base" tabindex="-1"><a class="header-anchor" href="#base" aria-hidden="true">#</a> base</h3><ul><li><p>类型： <code>string</code></p></li><li><p>默认值： <code>&#39;&#39;</code></p></li><li><p>详情：</p><p>设置路由前缀，通常用于部署到非根目录。比如你有路由 <code>/pageA</code>、<code>/pageB</code>，然后设置了 <code>base</code> 为 <code>/manage/</code>，那么就可以通过 <code>/manage/pageA</code>、<code>/manage/pageB</code> 访问到它们。</p></li></ul><div class="custom-container warning"><p class="custom-container-title">2.1.x 已废弃</p><p>2.1.x 版本请使用 router.base 代替</p></div><h3 id="builder" tabindex="-1"><a class="header-anchor" href="#builder" aria-hidden="true">#</a> builder</h3><ul><li>类型： <code>string</code></li><li>默认值： 如果装了多个构建,需要通过 builder 指定具体使用哪个</li><li>详情： 比如 dev 用 vite，构建用 webpack</li><li>示例：</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">builder</span><span class="token operator">:</span> <span class="token string">&#39;webpack&#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 class="line-number"></div></div></div><h3 id="define" tabindex="-1"><a class="header-anchor" href="#define" aria-hidden="true">#</a> define</h3><ul><li>类型： <code>object</code></li><li>默认值： <code>{}</code></li><li>详情： 用于提供给代码中可用的变量。</li><li>示例：</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">define</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">__DEV__</span><span class="token operator">:</span> <span class="token string">&#39;development&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后你代码里写 <code>console.log(__DEV__)</code>，会被编译成 <code>console.log(&#39;development&#39;)</code>。</p><h3 id="dynamicimport" tabindex="-1"><a class="header-anchor" href="#dynamicimport" aria-hidden="true">#</a> dynamicImport</h3><ul><li><p>类型： <code>boolean</code></p></li><li><p>默认值： false</p></li><li><p>详情：</p><p>路由是否按需加载</p></li></ul><h3 id="inlinelimit" tabindex="-1"><a class="header-anchor" href="#inlinelimit" aria-hidden="true">#</a> inlineLimit</h3><ul><li><p>类型： <code>number</code></p></li><li><p>默认值： <code>8192</code>(8k)</p></li><li><p>详情：</p><p>配置图片文件是否走 base64 编译的阈值。默认是 <code>8192</code> 字节，小于它会被编译为 base64 编码，否则会生成单独的文件。</p></li></ul><h3 id="mock" tabindex="-1"><a class="header-anchor" href="#mock" aria-hidden="true">#</a> mock</h3><ul><li><p>类型： <code>object || boolean</code></p></li><li><p>默认值： <code>{}</code></p></li><li><p>详情：</p><p>配置 mock 属性。</p><ul><li>当 mock 为 <code>boolean</code> 类型时，<code>true</code> 表示打开 mock，<code>false</code> 表示关闭 mock。</li><li>当 mock 为 <code>object</code> 类型时，默认打开 mock。也可以通过子属性 <code>prefix</code> 添加过滤条件，满足条件的走 mock 文件。</li></ul></li><li><p>示例：</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">&#39;/api/auth&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后所有以 <code>/api/users</code> 开始的请求，就能进入 mock.js 文件处理，<a href="../../guide/mock">mock.js 示例</a>。</p><h3 id="mountelementid" tabindex="-1"><a class="header-anchor" href="#mountelementid" aria-hidden="true">#</a> mountElementId</h3><ul><li><p>类型： <code>string</code></p></li><li><p>默认值： <code>app</code></p></li><li><p>详情：</p><p>指定渲染到的 HTML 元素 id。</p></li></ul><h3 id="outputpath" tabindex="-1"><a class="header-anchor" href="#outputpath" aria-hidden="true">#</a> outputPath</h3><ul><li><p>类型： <code>string</code></p></li><li><p>默认值： <code>dist</code></p></li><li><p>详情：</p><p>指定输出路径。</p></li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不允许设定为 <code>src</code>、<code>public</code>、<code>pages</code> 等约定目录。</p></div><h3 id="plugins" tabindex="-1"><a class="header-anchor" href="#plugins" aria-hidden="true">#</a> plugins</h3><ul><li><p>类型： <code>Array(string)</code></p></li><li><p>默认值： <code>[]</code></p></li><li><p>详情：</p><p>配置额外的 <code>fes</code> 插件。 数组项为指向插件的路径，可以是 npm 依赖、相对路径或绝对路径。如果是相对路径，则会从项目根目录开始找。</p></li><li><p>示例：</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token comment">// npm 依赖</span>
<span class="token string">&#39;fes-plugin-hello&#39;</span><span class="token punctuation">,</span>
<span class="token comment">// 相对路径</span>
<span class="token string">&#39;./plugin&#39;</span><span class="token punctuation">,</span>
<span class="token comment">// 绝对路径</span>
<span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>__dirname<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/plugin.js</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><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><h3 id="proxy" tabindex="-1"><a class="header-anchor" href="#proxy" aria-hidden="true">#</a> proxy</h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{}</code></p></li><li><p>详情：</p><p>配置代理能力。</p></li><li><p>示例：</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string-property property">&#39;/v2&#39;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">&#39;https://api.douban.com/&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">changeOrigin</span><span class="token operator">:</span> <span class="token boolean">true</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>`,29),h=n("code",null,"/v2/movie/in_theaters_proxy",-1),v={href:"http://api.douban.com/v2/movie/in_theaters_proxy",target:"_blank",rel:"noopener noreferrer"},b=t(`<h3 id="publicpath" tabindex="-1"><a class="header-anchor" href="#publicpath" aria-hidden="true">#</a> publicPath</h3><ul><li><p>类型： <code>string</code></p></li><li><p>默认值： <code>/</code></p></li><li><p>详情：</p><p>静态资源 publicPath。当打包的时候在静态文件路径前面添加 <code>publicPath</code> 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 <code>publicPath</code> 的值设为 CDN 的值就可以。</p></li></ul><h3 id="router" tabindex="-1"><a class="header-anchor" href="#router" aria-hidden="true">#</a> router</h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{ mode: &#39;hash&#39;, base: &#39;/&#39; }</code></p></li><li><p>详情：</p><p>配置路由，具体请查看指南中关于路由的介绍</p></li></ul><h3 id="singular" tabindex="-1"><a class="header-anchor" href="#singular" aria-hidden="true">#</a> singular</h3><ul><li><p>类型： <code>boolean</code></p></li><li><p>默认值： <code>false</code></p></li><li><p>详情：</p><p>配置是否启用单数模式的目录。 比如 <code>src/pages</code> 的约定在开启后为 <code>src/page</code> 目录，@fesjs/fes-plugins 插件也遵照此配置的约定。</p></li></ul><h3 id="targets" tabindex="-1"><a class="header-anchor" href="#targets" aria-hidden="true">#</a> targets</h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{}</code></p></li><li><p>详情：</p><p>配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换。</p></li></ul><h3 id="terseroptions" tabindex="-1"><a class="header-anchor" href="#terseroptions" aria-hidden="true">#</a> terserOptions</h3><ul><li>类型： <code>object</code></li><li>默认值：</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> defaultTerserOptions <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">compress</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// turn off flags with small gains to speed up minification</span>
<span class="token literal-property property">arrows</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">collapse_vars</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 0.3kb</span>
<span class="token literal-property property">comparisons</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">computed_props</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">hoist_funs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">hoist_props</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">hoist_vars</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">inline</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">loops</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">negate_iife</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">reduce_funcs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">reduce_vars</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">switches</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">toplevel</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">typeofs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token comment">// a few flags with noticeable gains/speed ratio</span>
<span class="token comment">// numbers based on out of the box vendor bundle</span>
<span class="token literal-property property">booleans</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 0.7kb</span>
<span class="token literal-property property">if_return</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 0.4kb</span>
<span class="token literal-property property">sequences</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 0.7kb</span>
<span class="token literal-property property">unused</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 2.3kb</span>
<span class="token comment">// required features to drop conditional branches</span>
<span class="token literal-property property">conditionals</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token literal-property property">dead_code</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token literal-property property">evaluate</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">mangle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">safari10</span><span class="token operator">:</span> <span class="token boolean">true</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 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>`,11),m=n("p",null,"详情：",-1),g={href:"https://github.com/terser/terser#minify-options",target:"_blank",rel:"noopener noreferrer"},_=t(`<h3 id="title" tabindex="-1"><a class="header-anchor" href="#title" aria-hidden="true">#</a> title</h3><ul><li><p>类型： <code>string</code></p></li><li><p>详情：</p><p>html 页面标题</p></li></ul><h2 id="webpack-专属配置" tabindex="-1"><a class="header-anchor" href="#webpack-专属配置" aria-hidden="true">#</a> webpack 专属配置</h2><h3 id="analyze" tabindex="-1"><a class="header-anchor" href="#analyze" aria-hidden="true">#</a> analyze</h3><ul><li>类型： <code>object</code></li><li>默认值：</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
<span class="token literal-property property">analyzerMode</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_MODE</span> <span class="token operator">||</span> <span class="token string">&#39;server&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">analyzerPort</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_PORT</span> <span class="token operator">||</span> <span class="token number">8888</span><span class="token punctuation">,</span>
<span class="token literal-property property">openAnalyzer</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_OPEN</span> <span class="token operator">!==</span> <span class="token string">&#39;none&#39;</span><span class="token punctuation">,</span>
<span class="token comment">// generate stats file while ANALYZE_DUMP exist</span>
<span class="token literal-property property">generateStatsFile</span><span class="token operator">:</span> <span class="token operator">!</span><span class="token operator">!</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_DUMP</span><span class="token punctuation">,</span>
<span class="token literal-property property">statsFilename</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_DUMP</span> <span class="token operator">||</span> <span class="token string">&#39;stats.json&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">logLevel</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_LOG_LEVEL</span> <span class="token operator">||</span> <span class="token string">&#39;info&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaultSizes</span><span class="token operator">:</span> <span class="token string">&#39;parsed&#39;</span> <span class="token comment">// stat // gzip</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><ul><li><p>详情：</p><p>构建结果分析，当配置 <code>p<wbr>rocess.env.ANALYZE</code> 时开启，例如执行<code>ANALYZE=1 fes build</code></p></li></ul><h3 id="chainwebpack" tabindex="-1"><a class="header-anchor" href="#chainwebpack" aria-hidden="true">#</a> chainWebpack</h3>`,8),f=n("li",null,[n("p",null,[s("类型："),n("code",null,"function")])],-1),y=n("li",null,[n("p",null,[s("默认值："),n("code",null,"null")])],-1),x=n("p",null,"详情：",-1),j={href:"https://github.com/sorrycc/webpack-chain#readme",target:"_blank",rel:"noopener noreferrer"},w=t(`<p>示例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">memo<span class="token punctuation">,</span> <span class="token punctuation">{</span> env<span class="token punctuation">,</span> webpack <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 删除 fes 内置插件</span>
memo<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">&#39;copy&#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></div><h3 id="cssloader" tabindex="-1"><a class="header-anchor" href="#cssloader" aria-hidden="true">#</a> cssLoader</h3>`,3),A=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),E=n("li",null,[n("p",null,[s("默认值： "),n("code",null,"''")])],-1),L=n("p",null,"详情：",-1),P={href:"https://github.com/webpack-contrib/css-loader#options",target:"_blank",rel:"noopener noreferrer"},N=t(`<h3 id="copy" tabindex="-1"><a class="header-anchor" href="#copy" aria-hidden="true">#</a> copy</h3><ul><li><p>类型： <code>Array(string) || Array(object)</code></p></li><li><p>默认值： <code>[]</code></p></li><li><p>详情：</p><p>设置要复制到输出目录的文件、文件夹。</p><p>配置约定 <code>from-to</code> 规则， 其中 <code>from</code> 是相对于 <code>cwd</code> 的路径，<code>to</code> 是相对于输出路径的路径。</p></li><li><p>示例：</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">copy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">from</span><span class="token operator">:</span> <span class="token string">&#39;/src/assets/images&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">to</span><span class="token operator">:</span> <span class="token string">&#39;assets/images&#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 class="line-number"></div></div></div><p>上面示例中，实现了将 <code>cwd</code> 路径中的 <code>/src/assets/images</code> 文件夹，在编译完成后，<code>copy</code> 到输出路径下的 <code>assets/images</code> 文件夹。</p><h3 id="devserver" tabindex="-1"><a class="header-anchor" href="#devserver" aria-hidden="true">#</a> devServer</h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{}</code></p></li><li><p>详情：</p><p>配置开发服务器。支持以下子配置项：</p><ul><li>port，端口号，默认 <code>8000</code></li><li>host，默认 <code>localhost</code></li><li>https，是否启用 https server，同时也会开启 HTTP/2</li></ul><p>启用 port 和 host 也可以通过环境变量 <code>PORT</code> 和 <code>HOST</code> 临时指定。</p></li></ul><h3 id="devtool" tabindex="-1"><a class="header-anchor" href="#devtool" aria-hidden="true">#</a> devtool</h3>`,7),V=n("li",null,[n("p",null,[s("类型： "),n("code",null,"string")])],-1),S=n("li",null,[n("p",null,[s("默认值： "),n("code",null,"cheap-module-source-map"),s(" in dev, "),n("code",null,"undefined"),s(" in build")])],-1),B=n("p",null,"详情：",-1),O={href:"https://webpack.js.org/configuration/devtool/#devtool",target:"_blank",rel:"noopener noreferrer"},z=t(`<h3 id="exportstatic" tabindex="-1"><a class="header-anchor" href="#exportstatic" aria-hidden="true">#</a> exportStatic</h3><ul><li>类型： <code>object</code></li><li>默认值： <code>{}</code></li><li>详情：</li></ul><p>配置 <code>html</code> 的输出形式，默认只输出 <code>index.html</code>。</p><p>如果开启 <code>exportStatic</code>，则会针对每个路由输出 <code>html</code> 文件。</p><p>比如以下路由，</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>/
/users
/list
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>不开启 <code>exportStatic</code> 时，输出，</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>- index.html
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>设置 <code>exportStatic: {}</code> 后，输出，</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>- index.html
- users.html
- list.html
</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="externals" tabindex="-1"><a class="header-anchor" href="#externals" aria-hidden="true">#</a> externals</h3><ul><li><p>类型：<code>object</code></p></li><li><p>默认值：<code>{}</code></p></li><li><p>详情：</p><p>设置哪些模块可以不被打包，通过 <code>&lt;script&gt;</code> 或其他方式引入。</p></li></ul><p>示例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">externals</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">vue</span><span class="token operator">:</span> <span class="token string">&#39;window.Vue&#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><h3 id="extrababelplugins" tabindex="-1"><a class="header-anchor" href="#extrababelplugins" aria-hidden="true">#</a> extraBabelPlugins</h3><ul><li>类型： <code>array</code></li><li>默认值： <code>[]</code></li><li>详情：</li></ul><p>配置额外的 <code>babel</code> 插件。</p><ul><li>示例：</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">extraBabelPlugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">&#39;import&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">libraryName</span><span class="token operator">:</span> <span class="token string">&#39;ant-design-vue&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">libraryDirectory</span><span class="token operator">:</span> <span class="token string">&#39;es&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token string">&#39;css&#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></div><h3 id="extrababelpresets" tabindex="-1"><a class="header-anchor" href="#extrababelpresets" aria-hidden="true">#</a> extraBabelPresets</h3><ul><li>类型： <code>array</code></li><li>默认值： <code>[]</code></li><li>详情：</li></ul><p>配置额外的 <code>babel</code> 插件集。</p><h3 id="extrapostcssplugins" tabindex="-1"><a class="header-anchor" href="#extrapostcssplugins" aria-hidden="true">#</a> extraPostCSSPlugins</h3>`,23),D=n("li",null,[n("p",null,[s("类型： "),n("code",null,"array")])],-1),T=n("li",null,[n("p",null,[s("默认值： "),n("code",null,"[]")])],-1),Y=n("p",null,"详情：",-1),Z={href:"https://github.com/postcss/postcss/blob/master/docs/plugins.md",target:"_blank",rel:"noopener noreferrer"},C=n("h3",{id:"html",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#html","aria-hidden":"true"},"#"),s(" html")],-1),F=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),M=n("li",null,[n("p",null,[s("默认值： "),n("code",null,"{}")])],-1),I=n("p",null,"详情：",-1),H={href:"https://github.com/jantimon/html-webpack-plugin#options",target:"_blank",rel:"noopener noreferrer"},U=n("h3",{id:"lessloader",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#lessloader","aria-hidden":"true"},"#"),s(" lessLoader")],-1),q=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),R=n("li",null,[n("p",null,[s("默认值： "),n("code",null,"{}")])],-1),W=n("p",null,"详情：",-1),G={href:"https://github.com/webpack-contrib/less-loader",target:"_blank",rel:"noopener noreferrer"},J=t('<h3 id="nodemodulestransform" tabindex="-1"><a class="header-anchor" href="#nodemodulestransform" aria-hidden="true">#</a> nodeModulesTransform</h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{ exclude: [] }</code></p></li><li><p>详情：</p><p>默认编译所有 <code>node_modules</code> 下的包，可以通过配置 <code>exclude</code> 来跳过某些包，以提高编译速度。</p></li></ul><h3 id="postcssloader" tabindex="-1"><a class="header-anchor" href="#postcssloader" aria-hidden="true">#</a> postcssLoader</h3>',3),$=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),K=n("li",null,[n("p",null,[s("默认值： "),n("code",null,"{}")])],-1),Q=n("p",null,"详情：",-1),X={href:"https://github.com/postcss/postcss-loader#options",target:"_blank",rel:"noopener noreferrer"},nn=n("h3",{id:"vueloader",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vueloader","aria-hidden":"true"},"#"),s(" vueLoader")],-1),sn=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),an=n("li",null,[n("p",null,[s("默认值："),n("code",null,"{}")])],-1),en=n("p",null,"详情：",-1),tn={href:"https://vue-loader.vuejs.org/zh/options.html",target:"_blank",rel:"noopener noreferrer"},pn=n("h2",{id:"vite-专属配置",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vite-专属配置","aria-hidden":"true"},"#"),s(" Vite 专属配置")],-1),ln=n("h3",{id:"viteoption",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#viteoption","aria-hidden":"true"},"#"),s(" viteOption")],-1),on=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),cn=n("p",null,"详情：",-1),rn={href:"https://cn.vitejs.dev/config/",target:"_blank",rel:"noopener noreferrer"},dn=n("h3",{id:"vitevueplugin",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vitevueplugin","aria-hidden":"true"},"#"),s(" viteVuePlugin")],-1),un=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),kn=n("p",null,"详情：",-1),hn={href:"https://github.com/vitejs/vite/tree/main/packages/plugin-vue",target:"_blank",rel:"noopener noreferrer"},vn=n("h3",{id:"vitevuejsx",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vitevuejsx","aria-hidden":"true"},"#"),s(" viteVueJsx")],-1),bn=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),mn=n("p",null,"详情：",-1),gn={href:"https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx",target:"_blank",rel:"noopener noreferrer"},_n=n("h3",{id:"vitelegacy",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vitelegacy","aria-hidden":"true"},"#"),s(" viteLegacy")],-1),fn=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),yn=n("p",null,"详情：",-1),xn={href:"https://github.com/vitejs/vite/tree/main/packages/plugin-legacy",target:"_blank",rel:"noopener noreferrer"},jn=n("h3",{id:"vitehtml",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vitehtml","aria-hidden":"true"},"#"),s(" viteHtml")],-1),wn=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),An=n("p",null,"详情：",-1),En={href:"https://github.com/vbenjs/vite-plugin-html",target:"_blank",rel:"noopener noreferrer"},Ln=n("h2",{id:"更多配置项",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#更多配置项","aria-hidden":"true"},"#"),s(" 更多配置项")],-1),Pn=n("p",null,"Fes.js 允许插件注册配置，如果你使用插件，肯定会在插件里找到更多配置项。",-1);function Nn(Vn,Sn){const a=l("ExternalLinkIcon");return o(),i("div",null,[r,n("ul",null,[n("li",null,[d,n("p",null,[n("a",u,[s("postcss autoprefixer 插件"),e(a)]),s(" 配置。")])])]),k,n("p",null,[s("然后访问 "),h,s(" 就能访问到 "),n("a",v,[s("http://api.douban.com/v2/movie/in_theaters_proxy"),e(a)]),s(" 的数据。")]),b,n("ul",null,[n("li",null,[m,n("p",null,[s("配置 "),n("a",g,[s("压缩器 terser 的配置项"),e(a)])])])]),_,n("ul",null,[f,y,n("li",null,[x,n("p",null,[s("通过 "),n("a",j,[s("webpack-chain"),e(a)]),s(" 的 API 修改 webpack 配置。")])])]),w,n("ul",null,[A,E,n("li",null,[L,n("p",null,[s("设置 "),n("a",P,[s("css-loader 配置项"),e(a)]),s("。")])])]),N,n("ul",null,[V,S,n("li",null,[B,n("p",null,[s("用户配置 sourcemap 类型。详见 "),n("a",O,[s(" webpack#devtool 配置"),e(a)]),s("。")])])]),z,n("ul",null,[D,T,n("li",null,[Y,n("p",null,[s("设置额外的 "),n("a",Z,[s("postcss 插件"),e(a)]),s("。")])])]),C,n("ul",null,[F,M,n("li",null,[I,n("p",null,[s("设置"),n("a",H,[s("html-webpack-plugin"),e(a)]),s("。")])])]),U,n("ul",null,[q,R,n("li",null,[W,n("p",null,[s("设置 "),n("a",G,[s("less-loader 配置项"),e(a)]),s("。")])])]),J,n("ul",null,[$,K,n("li",null,[Q,n("p",null,[s("设置 "),n("a",X,[s("postcss-loader 配置项"),e(a)]),s("。")])])]),nn,n("ul",null,[sn,an,n("li",null,[en,n("p",null,[s("配置 "),n("a",tn,[s("Vue Loader"),e(a)])])])]),pn,ln,n("ul",null,[on,n("li",null,[cn,n("p",null,[s("Vite 的配置，详情请看 "),n("a",rn,[s("Vite Config"),e(a)])])])]),dn,n("ul",null,[un,n("li",null,[kn,n("p",null,[s("自定义 "),n("a",hn,[s("@vitejs/plugin-vue"),e(a)]),s(" 的配置。")])])]),vn,n("ul",null,[bn,n("li",null,[mn,n("p",null,[s("自定义 "),n("a",gn,[s("@vitejs/plugin-vue-jsx"),e(a)]),s(" 的配置。")])])]),_n,n("ul",null,[fn,n("li",null,[yn,n("p",null,[s("自定义 "),n("a",xn,[s("@vitejs/plugin-legacy"),e(a)]),s(" 的配置。")])])]),jn,n("ul",null,[wn,n("li",null,[An,n("p",null,[s("自定义 "),n("a",En,[s("vite-plugin-html"),e(a)]),s(" 的配置。")])])]),Ln,Pn])}const On=p(c,[["render",Nn],["__file","index.html.vue"]]);export{On as default};
Reference in New Issue View Git Blame Copy Permalink