La await de nivel superior funciona correctamente cuando lo ejecuto en el complemento del servidor en vivo (o edito el IDE de Webstorm en vivo ); sin embargo, ese código arroja un error cuando lo implemento con npx parcel index.html .
SyntaxError no detectado: await solo es válido en funciones asíncronas y los cuerpos de módulos de nivel superior
const res = await Promise.resolve('hi there'); console.log(res) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <script type="module" defer src="script.js"></script> <title>parcel and top-level-await</title> </head> <body> </body> </html> { "devDependencies": { "parcel": "^2.2.1" }, "name": "top-level-await", "version": "1.0.0", "main": "index.js", "author": "elmi-elmi", "license": "MIT" }Encontré la respuesta después de leer Parcel Doc .
Lea aquí . Use un elemento <script type="module"> para hacer referencia a un módulo.
Elimine la carpeta dist si existe, luego use estos comandos:
index.html de compilación de paquetes npx índice de parcela npx.html
O configure un script para crear su aplicación. Puedes leer aquí .
Hasta ahora, hemos estado ejecutando la CLI del paquete directamente, pero puede ser útil crear algunas secuencias de comandos en su archivo
package.jsonpara hacerlo más fácil.
{ "name": "my-project", "source": "src/index.html", "scripts": { "start": "parcel", "build": "parcel build" }, "devDependencies": { "parcel": "latest" } }Ahora usa estos comandos:
npm:
compilación de ejecución de npm npm inicio de ejecución
hilo:
construcción de hilo inicio de hilo
const res = await Promise.resolve('hi there'); console.log(res) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <script type="module" defer src="script.js"></script> <title>parcel and top-level-await</title> </head> <body> </body> </html>