将 Nuxt3 实用函数导入 Netlify Edge Function

Question

如何将实用函数从

utils

目录导入到 Nuxt3 中的边缘函数中？

如果我在

sum

 中有一个函数 

/utils/sum.js

export const sum = (…nums) => nums.reduce((prev, current) => prev + current)

以及

netlify/edge-functions/foo.js

中的边缘函数

const result = sum(1, 2, 3)

export default () => {
  return Response.json({ sum: result })
}

export const config = {
  path: '/foo'
}

这会破坏并且

sum

未定义。我可以将裸模块导入边缘函数，但无法导入我自己的实用函数。

我还从终端运行

netlify dev

，因为使用

npm run dev

启动 nuxt 将不会加载函数。

Answer 1

在Nuxt 3中，

utils

是一个被扫描的文件夹，默认具有自动导入功能。如果您使用

netlify edge functions

，您必须小心如何将效用函数导入到边缘函数文件中，它会正常工作。

请注意，在项目根目录中，我们有以下文件夹结构：

|- netlify
|-- edge-functions
|---- foo.js
|- utils
|-- sum.js

以下是三个例子：

直接导入

// .js file extension must be included
import { sum } from '../../utils/sum.js'

export default async (req, context) => {
  const result = sum(2, 3, 4)
  return Response.json({ sum: result })
}

动态导入

export default async (req, context) => {
  // .js file extension must be included
  const { sum } = await import('../../utils/sum.js')
  const result = sum(2, 3, 4)
  return Response.json({ sum: result })
}

导入地图

• 在项目的根目录创建一个

  deno.json

  文件。

{
  "imports": {
    "foo": "./utils/sum.js"
  }
}

• 然后在 netlify.toml 的根目录中，我们需要导入映射的路径

[functions]
  deno_import_map = "./deno.json"

• 最后在

  netlify/edge-functions/foo.js

import { sum } from 'foo'
export default async (req, context) => {
  const result = sum(2, 3, 4)
  return Response.json({ sum: result })
}

最后运行

netlify dev

就可以测试边缘函数了。