查看“VuePress向客户端代码传递数据”的源代码


我们知道，VuePress 插件入口和主题入口是在 Node 端处理的，但有时候你可能需要向客户端动态传递数据。例如，你希望在用户传入不同的选项时生成不同的数据。

<span id="使用-define-hook"></span>
== 使用 <code>define</code> Hook ==

插件 API 提供了一个 define Hook 来定义客户端代码中的全局常量。你可以利用它来向客户端传递数据。

首先，通过 <code>define</code> Hook 定义一些常量：

<syntaxhighlight lang="ts">export default (options) => ({
  define: {
    __FOO__: options.foo || 'str',
    __OBJ__: {
      bar: options.bar || 123,
    },
  },
})</syntaxhighlight>
然后，在客户端代码中直接使用它们：

<syntaxhighlight lang="ts">const foo = __FOO__
const obj = __OBJ__</syntaxhighlight>
如果你在客户端代码中使用 TypeScript ，你可能需要手动声明这些全局常量的类型：

<syntaxhighlight lang="ts">declare const __FOO__: string
declare const __OBJ__: { bar: number }</syntaxhighlight>
== 写入并加载临时文件 ==

如果你需要实现一些更复杂的功能，你可以写入临时文件，并在客户端代码中动态加载它们。

首先，写入一个名为 <code>foo.js</code> 的临时文件，它将会生成在 temp 目录中：

<syntaxhighlight lang="ts">export default (options) => ({
  async onPrepared(app) {
    // 写入临时文件
    await app.writeTemp('foo.js', `export const foo = ${JSON.stringify(options.foo)}`)
  },
})</syntaxhighlight>
然后，在客户端代码中通过 <code>@temp</code> 别名来加载临时文件：

<syntaxhighlight lang="ts">import { foo } from '@temp/foo'</syntaxhighlight>
如果你在客户端代码中使用 TypeScript ，你可能需要手动声明这些临时模块的类型：

<syntaxhighlight lang="ts">declare module '@temp/foo' {
  export const foo: string
}</syntaxhighlight>