@enflujo/alquimia v2.0.0
@enflujo/alquimia
Librería para NodeJS o explorador que contiene funciones que usamos generalmente en los proyectos de EnFlujo.
Instalación
yarn add @enflujo/alquimiaVersiones
| Tipo | Descripción |
|---|---|
| ESM | Versión modular para ambientes donde usamos import y export en JS (>ES6). |
| CJS | Versión para NodeJS donde usamos require(). |
| IIFE | Versión empaquetada para usar directo en el explorador. |
ESM (Recomendada)
Esta es la manera recomendada de usar la librería, ya que permite sacudir (Tree Shaking) para importar en el JS final solo las partes de la librería que se usan en la aplicación. Esto asume que se usa algún empaquetador como Vite, Webpack, Rollup, etc.
Ejemplo con Vite
Esta sería la estructura de archivos:
- aplicacion/
- index.html
- package.json
- src/
- programa.jsArchivo index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>..:: EnFlujo ::..</title>
</head>
<body>
<h1>..:: EnFlujo ::..</h1>
<h2 id="subtitulo"></h2>
<script type="module" src="/src/programa.js"></script>
</body>
</html>Archivo src/programa.js
import { convertirEscala, version } from '@enflujo/alquimia';
const subtitulo = document.getElementById('subtitulo');
subtitulo.innerText = `@enflujo/alquimia version: ${version}`;
console.log(convertirEscala(50, 0, 100, 100, 200));Archivo package.json
(Las versiones de los paquetes en "dependencies" y "devDependencies" cambian con el tiempo, esto es sólo un ejemplo).
{
"name": "nombre-de-la-aplicacion",
"version": "1.0.0",
"scripts": {
"dev": "vite"
},
"dependencies": {
"@enflujo/alquimia": "^0.0.2"
},
"devDependencies": {
"vite": "^3.0.5"
}
}Ver aplicación en modo de desarrollo con un servidor local:
yarn devVer página en http://localhost:5173/
Node CJS
La librería se puede importar usando import y también con require(). Luego de instalarla desde NPM uno puede decidir la forma de importarla dependiendo del ambiente de trabajo, no hay ninguna diferencia entre uno u otro.
Importar con require():
const { convertirEscala, version } = require('@enflujo/alquimia');
console.log(version);
console.log(convertirEscala(50, 0, 100, 100, 200));IIFE o simple HTML
***█* ***** **██* *█*** *█**█ ***** █***█
**█*█ **█** *█**█ █**** █**█* ***** **█**
*█*** ***█* █**** *█*** *█**█ ****█ *█*█*
█**** █***█ *█*** █**** █**█* ***** *█*█*
*██** ██**█ **██* *█*** *█**█ **█*█ *█*█*
█**** █*█*█ *█**█ █**** █**█* *█**█ *█*█*
*█**█ █**██ *█*** *█**█ *█**█ ██*██ **█**
**██* █**█* *█*** █*███ **██* *███* █***█La librería está disponible como paquete que se puede importar de manera directa en HTML y queda disponible en JavaScript como objeto global con el nombre de alquimia.
A diferencia de las otras versiones, acá se va a descargar la librería completa en el explorador. Es útil para hacer ejercicios sencillos con los estudiantes sin tener que enseñarles a usar NPM o algún empaquetador. Acá se importa como <script> y ya está.
La librería está en el CDN JSDelivr: alquimia.min.js
https://cdn.jsdelivr.net/gh/enflujo/enflujo-alquimia/libreria/alquimia.min.jsUn ejemplo de la estructura básica de un proyecto de HTML:
- ejemplo/
- index.html
- programa.jsAlgo así sería el archivo index.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>..:: EnFlujo | Alquimia ::..</title>
</head>
<body>
<!-- Importar la librería antes de usarla. -->
<script src="https://cdn.jsdelivr.net/gh/enflujo/enflujo-alquimia/libreria/alquimia.min.js"></script>
<!-- Queda disponible de manera global y se puede usar en otros archivos JS. -->
<script src="./programa.js"></script>
</body>
</html>Al importar la versión llamada alquimia.min.js, queda disponible como objeto global. Entonces la podemos usar en otros JS que importamos posteriormente.
Archivo programa.js:
console.log(alquimia);
const version = alquimia.version;
const algunCalculo = alquimia.convertirEscala(50, 0, 100, 100, 200);