Comenzar un proyecto javascript con npm

Para crear un proyecto JavaScript, debemos crear una carpeta en nuestro disco duro e incluir ahí todas las librerías necesarias para hacer funcionar nuestra aplicación web. En nuestro ejemplo vamos a configurar un projecto web que utilice la libreria ThreeJs. ThreeJs es una libreria de animación 3D y podéis encontrar más información sobre esta libreria en su sitio web.

mkdir projectoThreeJs && cd projectoThreeJs

Una vez dentro, llamamos al inicializador de paquetes de node.js

npm init

Este comando nos hará una serie de preguntas sencillas que debemos ir contestando para configurar nuestro proyecto. Si queremos usar los valores por defecto y evitar que nos pregunte, usaremos el comando:

npm init -y

Con este comando generamos un archivo llamado package.json. Echando un vistazo a nuestro ‘package.json veremos algo parecido a esto:

{
   "name": "proyecto-threejs",
   "version": "1.0.0",
   "description": "Mi primer projecto con THREEJs",
   "main": "index.js",
   "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1"
},
   "author": "Alberto <myemail@domain.es>",
   "license": "ISC"
}

Todos los campos del fichero json son autodescriptivos excepto dos, que pueden requerir algo más de explicación:

• ‘main’: indica el punto de entrada de nuestra aplicación. Si desarrollamos una aplicación web lo cambiamos por ‘index.html’ y si desarrollamos un SPA y/o aplicaciones de escritorio o servidor pondremos index.js
• ‘scripts’: Aquí definimos todos los comandos asociados a nuestro proyecto y que podrán ser ejecutados desde la raiz usando el comando ‘npm run <nombre_del_script>

Dado que el propósito es crear una aplicación web cambiaremos el punto de entrada de nuestra aplicación:

{
    "main": "src/index.html",
}

INSTALANDO DEPENDENCIAS

Ahora que tenemos definido el proyecto, necesitamos instalar las dependencias que harán funcionar nuestra aplicación web. Obviamente, una de ellas es la librería/módulo ThreeJs. Los pasos de instalación de este módulo los puedes consultar aquí. También instalaremos el módulo Parcel, y encontrarás instrucciones detalladas de su instalación en su sitio web.

npm install three
npm install --dev-save parcel-bundler

Las dos instrucciones anteriores añaden la libreria threejs y ‘parcel’ que es un módulo que añade un punto de entrada a nuestro proyecto y rastrea todas las dependencias entregando un único archivo final con todo nuestro código. Hay varias cosas a tener en cuenta:

• Al ser un proyecto en desarrollo se usa el parámetro ‘–dev-save’. Para no projectos proyectos en producción. Dado que parcel es una libreria que solo nos es útil para construir nuestro projecto lo añadimos como dependencia de desarrollo.
• Parcel permite usar módulos de ES6 (import/export), unificar todo nuestro código en un único archivo y comprobar cambios en tiempo real.

Después de ejecutar los comandos anteriores, veremos que el archivo package.json ha cambiado, incluyendo la nueva configuración. No obstante, debemos añadir nuevos cambios que permitan usar el «Hot reload» de parcel. Para ello modificamos la seccion «Scripts» como sigue:

"scripts": {
    "dev": "parcel src/index.html --open",
  },

Recuerda que la seccion «scripts», define comandos que podemos ejecutar desde el terminal. Con ‘npm run dev’ se abre el navegador con el resultado y con npm run test ejecutamos los tests que hayamos definido.

Por último, siguiendo la documentación de threejs, podemos crear nuestra primera aplicación 3D importando el módulo threejs a nuestro projecto y usando sus propiedades y métodos:

import * as THREE from "three";
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function animate() {
    requestAnimationFrame( animate );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render( scene, camera );
};

animate();

Para ver el resultado teclea:

npm run dev