您如何在 Cloudflare 工作脚本中使用 ES6 导出？

Question

我正在尝试熟悉 CloudFlare 工作人员。

我从 https://developers.cloudflare.com/workers/get-started/quickstarts 复制了一个快速启动项目，通过：

wrangler generate my-app https://github.com/cloudflare/worker-template

这给了我一个 JS 文件，它通过 handleRequest:

侦听“获取”和 returns 一个 Response

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  return new Response('Hello worker!', {
    headers: { 'content-type': 'text/plain' },
  })
}

好的，有道理。

现在我想包括 Cloudflare's examples

之一

export default {
  fetch() {
    const html = `<!DOCTYPE html>
      <body>
        <h1>Hello World</h1>
        <p>This markup was generated by a Cloudflare Worker.</p>
      </body>
    `;
    return new Response(html, {
      headers: {
        "content-type": "text/html;charset=UTF-8",
      },
    });
  },
};

这不太有意义。我应该用它替换所有原始代码吗？如果这样做，我会在 wrangler publish:

上收到错误消息

Error: Something went wrong with the request to Cloudflare... No event handlers were registered. This script does nothing.

我应该以某种方式将它们混合在一起吗？如何？是否缺少某个步骤或配置？

Answer 1

是的，你应该把它们混在一起。按照指南简单说一下here

Fundamentally, a Workers application consists of two parts:

An event listener that listens for FetchEvents, and An event handler that returns a Response object which is passed to the event’s .respondWith() method.

只是编辑第一个示例，以便您轻松理解

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const html = `<!DOCTYPE html>
  <body>
    <h1>Hello World</h1>
    <p>This markup was generated by a Cloudflare Worker.</p>
  </body>`;
  return new Response(html, {
    headers: { "content-type": "text/html;charset=UTF-8" },
  })
}

Answer 2

您问题中的两个代码片段使用了 Workers 支持的两种不同语法：Service Workers 语法和 ES 模块语法。 addEventListener 与 Service Workers 语法一起使用，这是 Workers 支持的原始语法。最近，Workers 添加了对基于 ES 模块的新语法的支持，该语法使用 export default 导出处理程序。这种新语法避免了一些样板代码（没有奇怪的 event.respondWith()）并且还有其他一些优点。

您需要在 wrangler.toml 中指定您使用的语法。要使用模块语法，您需要添加：

[build.upload]
format = "modules"
main = "./worker.mjs"

See more documentation here.

您如何在 Cloudflare 工作脚本中使用 ES6 导出？

How do you use ES6 exports in Cloudflare worker scripts?

javascript

cloudflare-workers