text: "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[3604],{76368:(s,n,a)=>{a.r(n),a.d(n,{data:()=>e});const e={key:"v-89c0c20c",path:"/zh/vuepress-next/advanced/cookbook/passing-data-to-client-code.html",title:"向客户端代码传递数据",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"使用 define Hook",slug:"使用-define-hook",children:[]},{level:2,title:"写入并加载临时文件",slug:"写入并加载临时文件",children:[]}],git:{updatedTime:1635758933e3,contributors:[{name:"shentuzhigang",email:"shentuzhigang@moresec.cn",commits:1}]},readingTime:{minutes:1.25,words:376},filePathRelative:"zh/vuepress-next/advanced/cookbook/passing-data-to-client-code.md",content:"# 向客户端代码传递数据\n\n我们知道，VuePress 插件入口和主题入口是在 Node 端处理的，但有时候你可能需要向客户端动态传递数据。例如，你希望在用户传入不同的选项时生成不同的数据。\n\n## 使用 `define` Hook\n\n插件 API 提供了一个 [define](../../reference/plugin-api.md#define) Hook 来定义客户端代码中的全局常量。你可以利用它来向客户端传递数据。\n\n首先，通过 `define` Hook 定义一些常量：\n\n```js\nmodule.exports = (options) => ({\n  define: {\n    __FOO__: options.foo || 'str',\n    __OBJ__: {\n      bar: options.bar || 123,\n    },\n  },\n})\n```\n\n然后，在客户端代码中直接使用它们：\n\n\n```js\nconst foo = __FOO__\nconst obj = __OBJ__\n```\n\n如果你在客户端代码中使用 TypeScript ，你可能需要手动声明这些全局常量的类型：\n\n```ts\ndeclare const __FOO__: string\ndeclare const __OBJ__: { bar: number }\n```\n\n## 写入并加载临时文件\n\n如果你需要实现一些更复杂的功能，你可以写入临时文件，并在客户端代码中动态加载它们。\n\n首先，写入一个名为 `foo.js` 的临时文件，它将会生成在 [temp](../../reference/config.md#temp) 目录中：\n\n```js\nmodule.exports = (options) => ({\n  async onPrepared(app) {\n    // 写入临时文件\n    await app.writeTemp('foo.js', `export const foo = ${JSON.stringify(options.foo)}`)\n  },\n})\n```\n\n然后，在客户端代码中通过 `@temp` 别名来加载临时文件：\n\n```js\nimport { foo } from '@temp/foo'\n```\n\n如果你在客户端代码中使用 TypeScript ，你可能需要手动声明这些临时模块的类型：\n\n```ts\ndeclare module '@temp/foo' {\n  export const foo: string\n}\n```\n"}},72113:(s,n,a)=>{a.r(n),a.d(n,{default:()=>_});var e=a(66252);const l=(0,e._)("h1",{id:"向客户端代码传递数据",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#向客户端代码传递数据","aria-hidden":"true"},"#"),(0,e.Uk)(" 向客户端代码传递数据")],-1),p=(0,e._)("p",null,"我们知道，VuePress 插件入口和主题入口是在 Node 端处理的，但有时候你可能需要向客户端动态传递数据。例如，你希望在用户传入不同的选项时生成不同的数据。",-1),o=(0,e._)("h2",{id:"使用-define-hook",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#使用-define-hook","aria-hidden":"true"},"#"),(0,e.Uk)(" 使用 "),(0,e._)("code",null,"define"),(0,e.Uk)(" Hook")],-1),r=(0,e.Uk)("插件 API 提供了一个 "),c=(0,e.Uk)("define"),t=(0,e.Uk)(" Hook 来定义客户端代码中的全局常量。你可以利用它来向客户端传递数据。"),D=(0,e.uE)('<p>首先，通过 <code>define</code> Hook 定义一些常量：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="shiki" style="background-color:#1E1E1E;"><code><span class="line"><span style="color:#4EC9B0;">module</span><span style="color:#D4D4D4;">.</span><span style="color:#4EC9B0;">exports</span><span style="color:#D4D4D4;"> = (</span><span style="color:#9CDCFE;">options</span><span style="color:#D4D4D4;">) </span><span style="color:#569CD6;">=&gt;</span><span style="color:#D4D4D4;"> ({</span></span>\n<span class="line"><span style="color:#D4D4D4;">  </span><span style="color:#9CDCFE;">define:</span><span style="color:#D4D4D4;"> {</span></span>\n<span class="line"><span style="color:#D4D4D4;">    </span><span style="color:#9CDCFE;">__FOO__:</span><span style="color:#D4D4D4;"> </span><span style="color:#9CDCFE;">options</span><span style="color:#D4D4D4;">.</span><span style="color:#9CDCFE;">foo</span><span style="color:#D4D4D4;"> || </span><span style="color:#CE9178;">&#39;str&#39;</span><span style="color:#D4D4D4;">,</span></span>\n<span class="line"><span style="color:#D4D4D4;">    </span><span style="color:#9CDCFE;">__OBJ__:</span><span style="color:#D4D4D4;"> {</span></span>\n<span class="line"><span style="color:#D4D4D4;">      </span><span style="color:#9CDCFE;">bar:</span><span style="color:#D4D4D4;"> </span><span style="color:#9CDCFE;">options</span><span style="color:#D4D4D4;">.</span><span style="color:#9CDCFE;">bar</span><span style="color:#D4D4D4;"> || </span><span style="color:#B5CEA8;">123</span><span style="color:#D4D4D4;">,</span></span>\n<span class="line"><span style="color:#D4D4D4;">    },</span></span>\n<span class="line"><span style="color:#D4D4D4;">  },</span></span>\n<span class="line"><span style="color:#D4D4D4;">})</span></span>\n<span class="line"></span></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></div></div><p>然后，在客户端代码中直接使用它们：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="shiki" style="background-color:#1E1E1E;"><code><span class="line"><span style="color:#569CD6;">const</span><span style="color:#D4D4D4;"> </span><span style="color:#4FC1FF;">foo</span><span style="color:#D4D4D4;"> = </span><span style="color:#9CDCFE;">__FOO__</span></span>\n<span class="line"><span style="color:#569CD6;">const</span><span style="color:#D4D4D4;"> </span><span style="color:#4FC1FF;">obj</span><span style="color:#D4D4D4;"> = </span><span style="color:#9CDCFE;">__OBJ__</span></span>\n<span class="line"></span></code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>如果你在客户端代码中使用 TypeScript ，你可能需要手动声明这些全局常量的类型：</p><div class="language-typescript ext-ts line-numbers-mode"><pre class="shiki" style="background-color:#1E1E1E;"><code><span class="line"><span style="color:#569CD6;">declare</span><span style="color:#D4D4D4;"> </span><span style="color:#569CD6;">const</span><span style="color:#D4D4D4;"> </span><span style="color:#4FC1FF;">__FOO__</span><span style="color:#D4D4D4;">: </span><span style="color:#4EC9B0;">string</span></span>\n<span class="line"><span style="color:#569CD6;">declare</span><span style="color:#D4D4D4;"> </span><span style="color:#569CD6;">const</span><span style="color:#D4D4D4;"> </span><span style="color:#4FC1FF;">__OBJ__</span><span style="color:#D4D4D4;">: { </span><span style="color:#9CDCFE;">bar</span><span style="color:#D4D4D4;">: </span><span style="color:#4EC9B0;">number</span><span style="color:#D4D4D4;"> }</span></span>\n<span class="line"></span></code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="写入并加载临时文件" tabindex="-1"><a class="header-anchor" href="#写入并加载临时文件" aria-hidden="true">#</a> 写入并加载临时文件</h2><p>如果你需要实现一些更复杂的功能，你可以写入临时文件，并在客户端代码中动态加载它们。</p>',8),i=(0,e.Uk)("首先，写入一个名为 "),y=(0,e._)("code",null,"foo.js",-1),d=(0,e.Uk)(" 的临时文件，它将会生成在 "),u=(0,e.Uk)("temp"),C=(0,e.Uk)(" 目录中："),m=(0,e.uE)('<div class="language-javascript ext-js line-numbers-mode"><pre class="shiki" style="background-color:#1E1E1E;"><code><span class="line"><span style="color:#4EC9B0;">module</span><span style="color:#D4D4D4;">.</span><span style="color:#4EC9B0;">exports</span><span style="color:#D4D4D4;"> = (</span><span style="color:#9CDCFE;">options</span><span style="color:#D4D4D4;">) </span><span style="color:#569CD6;">=&gt;</span><span style="color:#D4D4D4;"> ({</span></span>\n<span class="line"><span style="color:#D4D4D4;">  </span><span style="color:#569CD6;">async</span><span style="color:#D4D4D4;"> </span><span style="color:#DCDCAA;">onPrepared</span><span style="color:#D4D4D4;">(</span><span style="color:#9CDCFE;">app</span><span style="color:#D4D4D4;">) {</span></span>\n<span class="line"><span style="color:#D4D4D4;">    </span><span style="color:#6A9955;">// 写入临时文件</span></span>\n<span class="line"><span style="color:#D4D4D4;">    </span><span style="color:#C586C0;">await</span><span style="color:#D4D4D4;"> </span><span style="color:#9CDCFE;">app</span><span style="color:#D4D4D4;">.</span><span style="color:#DCDCAA;">writeTemp</span><span style="color:#D4D4D4;">(</span><span style="color:#CE9178;">&#39;foo.js&#39;</span><span style="color:#D4D4D4;">, </span><span style="color:#CE9178;">`export const foo = </span><span style="color:#569CD6;">${</span><span style="color:#4EC9B0;">JSON</span><span style="color:#D4D4D4;">.</span><span style="color:#DCDCAA;">stringify</span><span style="color:#D4D4D4;">(</span><span style="color:#9CDCFE;">options</span><span style="color:#D4D4D4;">.</span><span style="color:#9CDCFE;">foo</span><span style="color:#D4D4D4;">)</span><span style="color:#569CD6;">}</span><span style="color:#CE9178;">`</span><span style="color:#D4D4D4;">)</span></span>\n<span class="line"><span style="color:#D4D4D4;">  },</span></span>\n<span class="line"><span style="color:#D4D4D4;">})</span></span>\n<span class="line"></span></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></div></div><p>然后，在客户端代码中通过 <code>@temp</code> 别名来加载临时文件：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="shiki" style="background-color:#1E1E1E;"><code><span class="line"><span style="color:#C586C0;">import</span><span style="color:#D4D4D4;"> { </span><span style="color:#9CDCFE;">foo</span><span style="color:#D4D4D4;"> } </span><span style="color:#C586C0;">from</span><span style="color:#D4D4D4;"> </span><span style="color:#CE9178;">&#39;@temp/foo&#39;</span></span>\n<span class="line"></span></code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>如果你在客户端代码中使用 TypeScript ，你可能需要手动声明这些临时模块的类型：</p><div class="language-typescript ext-ts line-numbers-mode"><pre class="shiki" style="background-color:#1E1E1E;"><code><span class="line"><span style="color:#569CD6;">declare</span><span style="color:#D4D4D4;"> </span><span style="color:#569CD6;">module</span><span style="color:#D4D4D4;"> </span><span style="color:#CE9178;">&#39;@temp/foo&#39;</span><span style="color:#D4D4D4;"> {</span></span>\n<span class="line"><span style="color:#D4D4D4;">  </span><span style="color:#C586C0;">export</span><span style="color:#D4D4D4;"> </span><span style="color:#569CD6;">const</span><span style="color:#D4D4D4;"> </span><span style="color:#4FC1FF;">foo</span><span style="color:#D4D4D4;">: </span><span style="color:#4EC9B0;">string</span></span>\n<span class="line"><span style="color:#D4D4D4;">}</span></span>\n<span class="line"></span></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></div></div>',5),b={},_=(0,a(83744).Z)(b,[["render",function(s,n){const a=(0,e.up)("RouterLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[l,p,o,(0,e._)("p",null,[r,(0,e.Wm)(a,{to:"/zh/vuepress-next/reference/plugin-api.html#define"},{default:(0,e.w5)((()=>[c])),_:1}),t]),D,(0,e._)("p",null,[i,y,d,(0,e.Wm)(a,{to:"/zh/vuepress-next/reference/config.html#temp"},{default:(0,e.w5)((()=>[u])),_:1}),C]),m],64)}]])}}]);