Parcel es una herramienta de empaquetado del lado web
que puede proporcionar un entorno de proyecto de desarrollo en caliente. De lo contrario, Webpack
será más rápido que construir un proyecto.
Ahora creamos un directorio localmente
, luego usamos un editor para abrir el directorio que creamos y ejecutamos la terminal.
Ingrese npm init en la terminal para inicializar un proyecto.
Después de ejecutar, obtendremos un archivo package.json
. Luego debemos importar el paquete
y luego lo ejecutamos en la terminal.
npm install parcel-bundler
Después de la instalación, podemos verificar el paquete.json para ver el paquete de dependencia correspondiente
. Luego creamos el directorio raíz src del proyecto y creamos un index.html debajo de src.
El código de referencia es el siguiente
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Es un formato de archivo html muy común.
Luego agregue dos líneas de código debajo de los scripts en package.json
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
Agregue el paquete y el comando de compilación y dígale que empaquetamos y compilamos a través de index.html en src
Luego necesitamos escribir un archivo de entrada js.
Creamos un archivo main.js en la carpeta principal en el directorio src del proyecto,
y luego importamos nuestro archivo de entrada en index.html bajo src.
El código de referencia es el siguiente
<script src="./main/main.js" type = "module"></script>
Debido a que es un desarrollo modular, configure el tipo en módulo
y luego generamos una oración en main
console.log("执行成功");
Luego ejecutamos en la terminal
npm run dev
En este punto, el proyecto se está ejecutando en un puerto
, luego copie esta dirección en el navegador para ejecutar la página
, y luego buscaremos en el directorio del proyecto. El dist recién generado es el archivo que empaquetamos.
