Instalação
CDN e playground online
Se você é iniciante em JavaScript ou apenas deseja uma configuração simples para começar, você pode obter o Mithril.js através de um CDN:
<script src="https://unpkg.com/mithril/mithril.js"></script>
Caso queira experimentar o Mithril.js sem configurar um ambiente local, você pode usar um ambiente de testes online em flems.io/mithril.
npm
$ npm install mithril
As definições de tipo TypeScript estão disponíveis no DefinitelyTyped. Elas podem ser instaladas com:
$ npm install @types/mithril --save-dev
Criar um projeto localmente
Você pode usar um dos vários templates iniciais existentes para Mithril.js, como:
Por exemplo, se você quiser começar com mithril-esbuild-starter
, execute os seguintes comandos:
# Clone o template para um diretório de sua escolha
npx degit kevinfiol/mithril-esbuild-starter hello-world
# Acesse o diretório do projeto recém-criado
cd ./hello-world/
# Instale as dependências
npm install
# Compile o aplicativo e observe as mudanças
npm run dev
Início rápido com esbuild
A documentação do esbuild pode ser encontrada aqui.
- Inicialize o diretório como um pacote npm.
$ npm init --yes
- Instale as ferramentas necessárias.
$ npm install mithril
$ npm install esbuild --save-dev
Adicione uma entrada "start" à seção de scripts em
package.json
.json{ "...": "...", "scripts": { "start": "esbuild index.js --bundle --outfile=bin/main.js --watch" } }
Opcionalmente, se você quiser usar JSX, você pode usar as opções
--jsx-factory
e--jsx-fragment
com esbuild.json{ "...": "...", "scripts": { "start": "esbuild index.js --bundle --outfile=bin/main.js --jsx-factory=m --jsx-fragment='\"[\"' --watch" } }
Crie o arquivo
index.js
.
import m from 'mithril';
m.render(document.getElementById('app'), 'hello world');
- Crie o arquivo
index.html
.
<!DOCTYPE html>
<body>
<div id="app"></div>
<script src="bin/main.js"></script>
</body>
- Execute o script do seu bundler.
$ npm run start
- Você deverá ver
hello world
renderizado na página.