Estoy tratando de familiarizarme con los trabajadores de CloudFlare.
Copié un proyecto de inicio rápido de https://developers.cloudflare.com/workers/get-started/quickstarts , a través de:
wrangler generate my-app https://github.com/cloudflare/worker-template Esto me da un archivo JS que escucha "buscar" y devuelve una Response a través handleRequest :
addEventListener('fetch', event => { event.respondWith(handleRequest(event.request)) }) async function handleRequest(request) { return new Response('Hello worker!', { headers: { 'content-type': 'text/plain' }, }) }Bien, eso tiene sentido.
Ahora quiero incluir uno de los ejemplos de Cloudflare
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", }, }); }, }; Esto tiene menos sentido. ¿Se supone que debo reemplazar todo el código original con eso? Si lo hago, aparece un error en la wrangler publish :
Error: Algo salió mal con la solicitud a Cloudflare... No se registraron controladores de eventos. Este script no hace nada.
¿Se supone que debo mezclarlos de alguna manera? ¿Cómo? ¿Hay algún paso o configuración que me falta?
Los dos fragmentos de código en su pregunta usan dos sintaxis diferentes compatibles con Workers: la sintaxis de Service Workers y la sintaxis de ES Modules. addEventListener se usa con la sintaxis de Service Workers, que era la sintaxis original admitida por Workers. Más recientemente, Workers agregó soporte para una nueva sintaxis basada en módulos ES, que utiliza export default de exportación para exportar controladores. Esta nueva sintaxis evita algunas repeticiones (ningún evento extraño event.respondWith() ) y tiene algunas otras ventajas.
Debe especificar en su wrangler.toml qué sintaxis está utilizando. Para usar la sintaxis de los módulos, deberá agregar:
[build.upload] format = "modules" main = "./worker.mjs"Sí, se supone que debes mezclarlos. Poniéndolo simplemente de acuerdo con la guía aquí .
Fundamentalmente, una aplicación de Workers consta de dos partes:
Un detector de eventos que escucha FetchEvents y un controlador de eventos que devuelve un objeto Response que se pasa al método .respondWith() del evento.
Solo editando el primer ejemplo para que lo entiendas facilmente
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" }, }) }