EsJSPrimeros pasos
Prueba en línea
¿Quieres probar EsJS sin tener que instalar nada en tu equipo? Puedes hacerlo en línea utilizando el EsJS Editor.
Instalación
Prerequisitos
- Node.js (>= 18.0.0)
- Terminal para ejecutar comandos
- Editor de código
- Recomendado: Visual Studio Code con la extensión EsJS
Instalación automática
La forma más fácil de crear un proyecto EsJS es utilizando el siguiente comando, que te guiará en la creación de un proyecto a partir de una plantilla:
bash
npm create esjs@latestbash
pnpm create esjs@latestbash
yarn create esjs@latestbash
bun create esjs@latestUna vez que se haya creado el proyecto, puedes ejecutarlo con el siguiente comando:
bash
npm run devbash
pnpm devbash
yarn devbash
bun run devNavega a http://localhost:3000 para ver el resultado.
Instalación manual
La instalación manual puede realizarse utilizando Babel o Vite. Se recomienda utilizar Vite, ya que es más rápido y fácil de configurar.
Instalación con Vite
- Crea un nuevo proyecto Vite con Vanilla JS:
bash
npm init vite@latestbash
pnpm init vite@latestbash
yarn create vite@latestbash
bun create vite@latest- Estructura del proyecto recomendada:
plaintext
├── src/
| ├── vite.svg
| ├── contador.esjs
│ ├── miapp.esjs
| ├── principal.js
│ └── ...
├── index.html
├── style.css
├── package.json
├── vite.config.js
└── ...src/contador.esjses un archivo de ejemplo que puedes eliminar.src/miapp.esjses el archivo principal de tu aplicación.src/principal.jses el archivo que carga EsJS en tu HTML.index.htmles el archivo HTML principal de tu aplicación.style.csses el archivo CSS principal de tu aplicación.vite.config.jses el archivo de configuración de Vite.package.jsones el archivo de configuración de npm.
- Instala las dependencias de desarrollo:
bash
npm install @es-js/vite-plugin-esjs --save-devbash
pnpm add @es-js/vite-plugin-esjs --save-devbash
yarn add @es-js/vite-plugin-esjs --devbash
bun add @es-js/vite-plugin-esjs --dev- Configura Vite para usar EsJS en
vite.config.js:
Nota: Si no tienes un archivo vite.config.js, crea uno en la raíz del proyecto.
js
import { URL, fileURLToPath } from 'node:url'
import { defineConfig } from 'vite'
import EsJS from '@es-js/vite-plugin-esjs'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
// https://github.com/es-js/esjs
EsJS()
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
extensions: [
'.js',
'.json',
'.jsx',
'.mjs',
'.ts',
'.tsx',
'.esjs',
],
},
build: {
target: 'esnext',
outDir: './compilado'
},
server: {
port: 3000 // Puedes cambiar el puerto si lo necesitas
}
})- Modifica los archivos anteriormente mencionados para que se vean de la siguiente manera:
html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Proyecto EsJS</title>
</head>
<body>
<!-- Div donde se montará el componente -->
<div id="app"></div>
<!-- Archivo encargado de cargar esjs en tu HTML -->
<script type="module" src="src/principal.js"></script>
</body>
</html>js
import './miapp.esjs'esjs
importar '../style.css'
importar viteLogo desde './vite.svg'
importar { Contar } desde './contador.esjs'
document.querySelector('#app').innerHTML = `
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="${viteLogo}" class="logo" alt="Vite logo" />
</a>
<a href="https://es.js.org" target="_blank">
<img src="https://es.js.org/assets/logo.png" class="logo vanilla esjs" alt="EsJS logo" />
</a>
<h1>Hola Vite + EsJS!</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">
Clic en EsJS logo para más información.
</p>
</div>
`
Contar(document.querySelector('#counter'))esjs
exportar funcion Contar(elemento) {
mut conteo = 0
const modContador = (conteo_actual) => {
conteo = conteo_actual
elemento.innerHTML = `Contador en ${conteo}`
}
elemento.addEventListener('click', () => modContador(conteo + 1))
modContador(0)
}css
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vanilla:hover {
filter: drop-shadow(0 0 2em #512DA8);
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}Ejecuta tu proyecto:
bashnpm run devbashpnpm devbashyarn devbashbun run devNavega a
http://localhost:3000para ver el resultado.
Te recomendamos algunas integraciones para que puedas continuar aprendiendo sobre EsJS:
Tutorial Interactivo
Puedes aprender EsJS de forma interactiva en Aprender.EsJS.dev (Trabajo En Progreso).