Parcel.js
Veremos una alternativa a Webpack 😃 documentación oficial
Iniciar NPM
Iniciamos un nuevo proyecto con:
npm init -y
Instalar Parcel.js
Ejecutamos:
npm i -D parcel-bundler
Configurar scripts
Agregamos los siguientes scripts a nuestro package.json
"scripts": {
"dev": "parcel src/index.html",
"pro": "parcel build src/index.html"
},
Crear carpeta src
Creamos una carpeta llamada src y dentro creamos un index.html
y un index.js
<!DOCTYPE html>
<html lang="es">
<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>Parcel</title>
</head>
<body>
<h1>Sin Parcel</h1>
<script src="./index.js"></script>
</body>
</html>
console.log('hola mundo con Parcel.js');
Run dev
Ejecutamos:
npm run dev
Módulos
Podemos separar nuestro código utilizando módulos de Javascript, para eso creamos un nuevo archivo llamado modulo.js
:
const saludar = () => {
return 'Hola desde un módulo';
}
export {saludar}
Y dentro de nuestro index.js lo podemos llamar:
// console.log('hola mundo 2');
import {saludar} from './modulo.js'
console.log(saludar());
Ahora verán el saludos pero desde un módulo
SASS
Ahora veremos como trabajar con archivos scss (SASS), creamos una carpeta llamada 'estilos' y dentro un archivo main.scss
:
$colorFondo: peru;
body{
background-color: $colorFondo;
}
Y los llamamos dentro de nuestro archivo index.js
:
import './estilos/main.scss';
Al guardar se instalará de forma automática Sass 😃
Producción
Para pasar a producción les recomiendo eliminar la carpeta 'dist' y ejecutar:
npm run pro