---
title: 使用
author: pengzhanbo
createTime: 2024/03/12 15:53:55
permalink: /plugins/plugin-netlify-functions/usage/
---

## 安装

::: code-tabs
@tab  npm

``` sh
npm install vuepress-plugin-netlify-functions
```

@tab:active yarn

``` sh
yarn add vuepress-plugin-netlify-functions
```

@tab pnpm

``` sh
pnpm add vuepress-plugin-netlify-functions
```

:::

## 在vuepress中使用

### 添加插件

在vuepress 的配置文件中 引入并 在 `plugins` 字段中添加插件。

::: code-tabs
@tab .vuepress/config.{ts,js}

``` ts
import { defineUserConfig } from 'vuepress'
import { netlifyFunctionsPlugin } from 'vuepress-plugin-netlify-functions'

export default defineUserConfig({
  // ...
  plugins: [
    netlifyFunctionsPlugin(),
  ]
  // ...
})
```

:::

### 编写 functions

启动 vuepress 开发服务后， 就可以在你的 `.vuepress/functions/` 目录中，新建并开发你的 `function`

[`functions` 开发指南](https://docs.netlify.com/functions/overview/)

## 在 vuepress plugin 中使用

### 添加插件钩子

::: code-tabs
@tab typescript

``` ts
import * as path from 'node:path'
import { App } from '@vuepress/core'
import { useNetlifyFunctionsPlugin } from 'vuepress-plugin-netlify-functions'

function myPlugin(): Plugin {
  return (app: App) => {
    const {
      // 请求前缀,  默认 /api
      proxyPrefix,
      preparePluginFunctions,
      generatePluginFunctions
    } = useNetlifyFunctionsPlugin(app, {
      // 指定插件的functions目录，相关脚本在此目录中开发
      directory: path.resolve(__dirname, 'functions')
    })
    return {
      name: 'vuepress-plugin-myPlugin',
      onPrepared: () => preparePluginFunctions(),
      onGenerated: () => generatePluginFunctions(),
    }
  }
}
```

:::

在你的插件开发目录，假如是以下结构：

``` sh
.
└─src # 开发目录
   ├─shared
   └─node # node 端
      ├─functions # functions目录
      │  └─my_function.ts # functions脚本
      ├─plugin.ts
      └─index.ts
```

那么，就在你的 `src/node/functions` 目录下进行 functions 开发

[`functions` 开发指南](https://docs.netlify.com/functions/overview/)

如果你已经开发好了一个 `functions/my_function.ts` 的function。

那么你可以在 client端，通过以下方式调用：

``` ts
async function fetchMyFunction() {
  const result = await fetch('/api/my_functions')
  // do something
}
```

就像调用一个普通接口一个样简单。

## 环境变量

你可以在项目根目录中，新建一个 `.env` 文件，用于配置开发时环境变量

::: warning
这些环境变量仅用于开发环境时使用，部署生产时不会被加载。

是用于在开发环境中 代替 `Netlify Environment Variables` 。
在生产环境中，应该使用 `Netlify Environment Variables` 设置这些环境变量。

如果你的 `.env` 文件中有比较私密的信息，建议将 `.env` 文件添加到 `.gitignore` 中，避免提交到 仓库中。
:::

::: code-tabs
@tab .env

```
YOUR_ENV_VAR='your env var'
```

@tab functions/my_function.ts

``` ts
const YOUR_ENV_VAR = process.env.YOUR_ENV_VAR
```

:::

## 示例

如何使用本插件开发一个 提供 functions 的插件，这里提供了一个 例子：

[plugin-page-collection](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-page-collection)

可以参考此例子进行插件开发。

该例子提供了以下功能：

- 连接 `lean cloud`
- 记录页面访问次数，并上报到 `lean cloud` 数据库。
- 查询 当前页面访问次数，并提供组件嵌入到页面中。
