Saltar al contenido principal

Import Export

@serverSerrverlesskiy

Para hacer que objetos, funciones, clases o variables estén disponibles para el mundo exterior, simplemente expórtelos y luego impórtelos, cuando sea necesario, a otros archivos de proyecto.

Video

«Hello, World!» на Node.js

Node.js® es un entorno de JavaScript basado en el motor Chrome V8.

Comencemos con Node.js simplemente escribiendo node en la consola:

$ node
>

Si no lo tiene, descárguelo e instálelo en su computadora.

Node

Ahora intentemos imprimir algo:

$ node
> console.log('hello from Node.js')
// Después de presionar Enter, obtendrá lo siguiente:
hello from Node.js
undefined

Export

Siéntase libre de experimentar con Node.js usando esta interfaz: es común probar pequeños fragmentos de código aquí si no es práctico ponerlos todos en un archivo.

¡Es hora de crear nuestra aplicación Hello Node.js!

Comencemos por crear el archivo index.js. Con el siguiente comando creamos la carpeta myProject y entramos en ella.

mkdir myProject && cd myProject

Ahora creamos el propio archivo index.js

touch index.js

Abra su editor de código o descárguelo e instálelo. Recomendamos VS Code.

Abra el editor de código y agregue la carpeta del proyecto que creamos.

nuevo proyecto

Ahora abra el menú lateral haciendo clic en este icono.

nuevo proyecto

Copie el siguiente fragmento de código en él:

// index.js
console.log('hello from Node.js')

Para ejecutar este archivo, debe abrir su terminal nuevamente y cambiar al directorio donde se encuentra index.js.

En VS Code esto se puede hacer haciendo clic en estos iconos.

nuevo proyecto

Y selecciona la pestaña TERMINAL

nuevo proyecto

Una vez que haya navegado con éxito a la ubicación deseada, ejecute el archivo con el comando

node index.js

Verá que este comando producirá el mismo resultado que antes, enviando la cadena directamente a la terminal.

new prroject

Modularidad de la aplicación

Exportar

¡Es hora de pasar al siguiente nivel! Vamos a crear algo más complejo dividiendo nuestro código fuente en varios archivos JavaScript en aras de la legibilidad y el mantenimiento.

Estructura del proyecto

Cree la siguiente estructura de directorios (con archivos vacíos), pero no cree `package.json' todavía, lo generaremos automáticamente en el siguiente paso:

├── app
| ├── calc.js
| └── index.js
├── index.js
└── package.json

Para crear un nuevo archivo o carpeta en VS Code, haga clic en el icono correspondiente como se muestra en la imagen.

archivo nuevo

package.json

Cada proyecto Node.js comienza con la creación de un archivo package.json. Puede considerarlo como una representación JSON de la aplicación y sus dependencias. Contiene el nombre de su aplicación, el autor (usted) y todas las dependencias necesarias para ejecutar la aplicación. Este es el mapa de tu proyecto.

Puede generar interactivamente un archivo package.json con el comando

npm

npm init

en la terminal Después de ejecutar el comando, se le pedirá que ingrese cierta información, como el nombre de su aplicación, la versión, la descripción, etc. No se preocupe, simplemente presione 'Enter' hasta que obtenga el JSON generado y la pregunta ¿está bien?. Presione Enter una última vez y listo: su package.json se ha generado automáticamente y se ha colocado en la carpeta de su aplicación. Si abre este archivo en su IDE, se verá muy similar al fragmento de código a continuación.

// package.json
{
"name": "myproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

Es una buena práctica agregar un script de inicio a su paquete package.json. Así que agregue esta línea al objeto scripts:

"scripts": {
"start": "node index.js", // esta línea
"test": "echo \"Error: no test specified\" && exit 1"
}

Una vez que haya hecho eso, puede iniciar la aplicación con el comando npm start.

Importar

Ahora regresemos al primer archivo que creó llamado index.js. Se recomienda mantener este archivo muy compacto: solo incluye la aplicación en sí (el archivo index.js del subdirectorio /app creado anteriormente). Copie el siguiente código en su archivo index.js y guárdelo:

// index.js
require('./app/index')

o abreviatura para todos los archivos index.js

// index.js
require('./app')

Si no se especifica un archivo específico, el intérprete de código busca el archivo index.js y lo ingresa. Así, incluimos nuestro primer archivo en el proyecto.

Exportar

Exportar

Ahora es el momento de comenzar a construir la aplicación real. Abra el archivo index.js de la carpeta /app para crear un ejemplo muy simple: agregar una matriz de números. En este caso, el archivo index.js contendrá solo los números que queremos agregar, y la lógica que requiere cálculos debe colocarse en un módulo separado en el archivo calc.js. Pegue este código en el archivo index.js en el directorio /app.

// app/index.js
const calc = require('./calc')
const numbersToAdd = [3, 4, 10, 2]
const result = calc.sum(numbersToAdd)

console.log(`The result is: ${result}`)

Ahora pegue la lógica comercial real en el archivo calc.js que se puede encontrar en la misma carpeta.

// app/calc.js
const sum = arr => {
return arr.reduce((a, b) => a + b, 0)
}

module.exports.sum = sum // export

En este archivo, creamos la función sum y la exportamos, la hicimos disponible en otros archivos de proyecto.

Para verificar si hizo todo bien, guarde estos archivos, abra una terminal y escriba npm start o node index.js. Si todo se hizo correctamente, obtendrá la respuesta: 19. Si algo salió mal, revise cuidadosamente el registro en la consola y encuentre el problema basado en él.

new file

Total

Así que completamos el curso preparatorio sobre JavaScript antes del curso desarrollo móvil.

¿Problemas?

Problema

Escribe en Discord o Telegram chat y suscríbete a nuestras noticias

Campamento JavaScript

Preguntas:

Pregunta

Para hacer que los objetos, funciones, clases o variables estén disponibles para el mundo exterior, debe:

  1. Exportarlos y luego importarlos
  2. Importarlos y luego exportarlos

Node.js® es:

  1. Lenguaje de programación
  2. Entorno de JavaScript basado en el motor Chrome V8
  3. Navegador

package.json es:

  1. Entorno de JavaScript basado en el motor Chrome V8
  2. Representación JSON de la aplicación y sus dependencias
  3. Lenguaje de programación JSON

Para comprender cuánto ha aprendido en esta lección, realice la prueba en aplicación móvil en nuestra escuela sobre este tema.

EnglishMoji!

Enlaces:

  1. Documento web de MDN. Artículo "Módulos en ECMAScript 6: el futuro es ahora"
  2. Artículo "Módulos ES6 y cómo usar la importación y exportación en JavaScript"
  3. Artículo "requerir frente a importación/exportación de ES6"

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Dmitriy K.


Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨

EnglishMoji!