vuepress-theme-plume/docs/notes/vuepress-plugin/netlify-functions/使用.md

---
title: 使用
createTime: 2022/05/14 10:43:53
author: pengzhanbo
permalink: /note/vuepress-plugin/netlify-functions/usage/
---

## 安装

::: code-tabs
@tab  npm
``` sh
npm install @vuepress-plume/vuepress-plugin-netlify-functions
```

@tab:active yarn
``` sh
yarn add @vuepress-plume/vuepress-plugin-netlify-functions
```

@tab pnpm
``` sh
pnpm add @vuepress-plume/vuepress-plugin-netlify-functions
```
:::

## 在vuepress中使用


### 添加插件

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

::: code-tabs
@tab .vuepress/config.ts
``` ts
import { defineUserConfig } from 'vuepress'
import { netlifyFunctionsPlugin } from '@vuepress-plume/vuepress-plugin-netlify-functions'
export default defineUserConfig({
  //...
  plugins: [
     netlifyFunctionsPlugin(),
  ]
  // ...
})
```

@tab .vuepress/config.js
```js
const { netlifyFunctionsPlugin } = require('@vuepress-plume/vuepress-plugin-netlify-functions')
module.exports = {
  //...
  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 'path'
import { App } from '@vuepress/core'
import { useNetlifyFunctionsPlugin } from '@vuepress-plume/vuepress-plugin-netlify-functions'

const 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(),
    }
  }
}
```

@tab javascript
``` js
const path = require('path')
const { useNetlifyFunctionsPlugin } = require('@vuepress-plume/vuepress-plugin-netlify-functions')

const myPlugin = () => {
  return (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/packages/plugin-page-collection)

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

该例子提供了以下功能：

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