Instalación

CDN y área de pruebas en línea

Si eres nuevo en JavaScript o simplemente quieres una configuración sencilla para empezar, puedes obtener Mithril.js desde una CDN (Red de Distribución de Contenido):

html

<script src="https://unpkg.com/mithril/mithril.js"></script>

Si quieres probar Mithril.js sin configurar un entorno local, puedes usar fácilmente un área de pruebas en línea en flems.io/mithril.

npm

bash

$ npm install mithril

Las definiciones de TypeScript están disponibles en DefinitelyTyped. Se pueden instalar con:

bash

$ npm install @types/mithril --save-dev

Crear un proyecto localmente

Puedes usar una de las plantillas de inicio de Mithril.js existentes, como:

Por ejemplo, si quieres empezar con mithril-esbuild-starter, ejecuta estos comandos:

bash

# Clona la plantilla en un directorio de tu elección
npx degit kevinfiol/mithril-esbuild-starter hello-world

# Accede al directorio del proyecto recién creado
cd ./hello-world/

# Instala las dependencias
npm install

# Compila la aplicación y observa los cambios
npm run dev

Inicio rápido con esbuild

La documentación de esbuild se puede encontrar aquí.

Inicializa el directorio como un paquete npm.

bash

$ npm init --yes

Instala las herramientas necesarias.

bash

$ npm install mithril
$ npm install esbuild --save-dev

Agrega una entrada "start" a la sección scripts en package.json.

json

{
  "...": "...",
  "scripts": {
    "start": "esbuild index.js --bundle --outfile=bin/main.js --watch"
  }
}

Opcionalmente, si quieres usar JSX, puedes usar las opciones --jsx-factory y --jsx-fragment con esbuild.

json

{
  "...": "...",
  "scripts": {
    "start": "esbuild index.js --bundle --outfile=bin/main.js --jsx-factory=m --jsx-fragment='\"[\"' --watch"
  }
}

Crea el archivo index.js.

javascript

import m from 'mithril';
m.render(document.getElementById('app'), 'hello world');

Crea el archivo index.html.

html

<!DOCTYPE html>
<body>
  <div id="app"></div>
  <script src="bin/main.js"></script>
</body>

Ejecuta el script de empaquetado.

bash

$ npm run start

Abre index.html en un navegador. Deberías ver hello world mostrado en la página.

Instalación ​

CDN y área de pruebas en línea ​

npm ​

Crear un proyecto localmente ​

Inicio rápido con esbuild ​

Instalación

CDN y área de pruebas en línea

npm

Crear un proyecto localmente

Inicio rápido con esbuild