¿Cómo mantener los archivos compilados en un directorio separado?

Un proyecto web que contiene archivos HTML, CSS, JavaScript, imágenes y videos. La tarea es asegurarse de que todos los archivos del proyecto se compilen y empaqueten en uno separado directamente. Antes de continuar, me gustaría darle una breve introducción al empaquetador de paquetes .

Parcel-bundler: Es un módulo que ayuda a transcribir nuestra sintaxis ES6+ a un JavaScript tradicional que es legible por todos los motores de los navegadores. Además, ayuda a agrupar nuestro archivo HTML, archivo CSS y archivo JavaScript en un solo directorio llamado «dist» . Entonces, eso es lo que usaremos para poner nuestros archivos compilados en una carpeta.

Con la ayuda de package-bundler , podríamos lograr esto simplemente instalando el módulo de empaquetado de paquetes en nuestro proyecto. Los pasos explicados a continuación lo guiarán hasta el final para mantener los archivos compilados en un directorio separado.

Requisito previo: se requiere el node.js, la instalación de Node.js en Windows o la instalación de Node.js en Linux .

Paso 01: Inicialice npm en su proyecto.
```
npm init
```
Paso 02: Instale el empaquetador de paquetes desde el registro del Node
```
npm install parcel-bundler
```
Paso 03: abra su archivo package.json y realice los cambios a continuación en su objeto de secuencias de comandos (agregue el código a continuación a su objeto de secuencia de comandos).
```
"scripts":{
    "dev": "parcel index.html",
    "build": "parcel build index.html",
    "watch": "parcel watch index.html"
    }
```
El index.html es el archivo HTML, la ruta al archivo HTML depende de la estructura de su código, por ejemplo, /src/tem/index.html que contiene el JS externo y el CSS externo que queremos transcribir y compilar en un directorio. Si tiene varios archivos HTML, simplemente reemplace el index.html con *.html . La clave dev generalmente se usa para ejecutar su proyecto mientras aún está en la fase de desarrollo y la clave de compilación dentro del objeto de secuencia de comandos: la clave de compilación ayuda a compilar su proyecto para la producción con la ayuda de la palabra clave de compilación cerca de la palabra clave de paquete. La clave de observación ayuda a mantener su proyecto en transcripción y agrupación automáticas a medida que realiza cambios constantes en su código.
Paso 04: para ejecutar su proyecto durante la fase de desarrollo.
```
npm run dev
```
Paso 05: para mantener su proyecto en constante vigilancia contra cualquier cambio mientras aún se encuentra en la fase de desarrollo
```
npm run watch
```
Paso 06: para ejecutar su proyecto para la producción.
```
npm run build
```
Salida: Después de construir su proyecto, debería ver una nueva carpeta llamada «dist» , esta carpeta contiene todos los archivos compilados que ahora se pueden usar para la producción.

El siguiente ejemplo ilustra todos los pasos:
Ejemplo:

Paso 01: Cree una carpeta llamada «GFG» .
Paso 02: abra la carpeta en su IDLE o IDE deseado.

Paso 03: dentro de la carpeta, cree un archivo html llamado «codeTrans.html» e inserte el siguiente código html en el archivo html.

<!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" />
    <title>GeeksforGeeks | Transcribed JS to dir</title>
</head>
  
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <p>
            With geeksforgeeks, we wish to keep
            changing the difficulties in tech 
            into berry-pies ?
        </p>
        <button>Click me</button>
    </div>
    <script src="./js.js"></script>
</body>
  
</html>

Paso 04: cree un archivo JavaSCript dentro de la carpeta «GFG» y asígnele el nombre «js.js». Agregue el siguiente código en el archivo javascript.

const geeks =() =>{
    const btn = document.querySelector('button');
      const para = document.querySelector('p');
      btn.addEventListener('click',() => {
        para.textContent +=
          '.GeeksforGeeks A Computer Science Portal';
      });
}
geeks();

Paso 04: Vaya a su archivo package.json y dentro del objeto script, agregue el siguiente código.

"dev": "parcel index.html",
"build": "parcel build codeTrans.html",
"watch": "parcel watch codeTrans.html"

Paso 05: para obtener el archivo compilado en un directorio, abra su terminal IDE y ejecute el siguiente código.
```
npm run build
```
Salida: Una nueva carpeta llamada «dist» que contiene los archivos compilados.

Publicación traducida automáticamente

Artículo escrito por emmanuel_onah y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta