ES6+ em navegadores legados

Mithril.js é escrito em ES5, mas também é totalmente compatível com ES6 e versões posteriores. Todos os navegadores modernos o suportam nativamente, inclusive a sintaxe de módulo nativa. (Eles não suportam a resolução de módulo mágica do Node, então você não pode usar import * as _ from "lodash-es" ou similar. Eles apenas suportam caminhos relativos e endereços URL.) Assim, você pode usar livremente arrow functions para seus closure components e classes para seus class components.

No entanto, se você, como muitos de nós, ainda precisa dar suporte a navegadores mais antigos como o Internet Explorer, será necessário transpilar o código para ES5. Esta página explica como fazer isso usando o Babel para que o código ES6+ moderno funcione em navegadores antigos.

Configuração

Primeiro, se você ainda não o fez, verifique se você tem o Node instalado. Ele já vem com o npm pré-instalado, que usaremos em breve.

Após a instalação, abra um terminal e execute os seguintes comandos:

# Substitua isso pelo caminho real para o seu projeto. Coloque entre aspas se tiver espaços,
# e coloque entre aspas simples se você estiver no Linux/Mac e ele contiver um `$$` em qualquer lugar.
cd "/path/to/your/project"

# Se você já tiver um `package.json` lá, pule este comando.
npm init

Agora, você pode seguir um dos seguintes caminhos:

• Usar o Babel standalone, sem nenhum bundler
• Usar Babel e empacotar com Webpack

Usando o Babel standalone

Primeiro, precisamos instalar algumas dependências necessárias.

• @babel/cli instala a lógica central do Babel, bem como o comando babel.
• @babel/preset-env ajuda o Babel a identificar o que e como transpilar.

npm install @babel/cli @babel/preset-env --save-dev

Agora, crie um arquivo .babelrc e configure-o com @babel/preset-env.

{
  "presets": ["@babel/preset-env"],
  "sourceMaps": true
}

E, finalmente, se você tiver requisitos muito específicos sobre o que precisa suportar, talvez queira configurar o Browserslist para que o Babel (e outras bibliotecas) saibam quais recursos devem ser o alvo.

Por padrão, se você não configurar nada, o Browserslist usa uma configuração bastante razoável: > 0.5%, last 2 versions, Firefox ESR, not dead. A menos que você tenha circunstâncias muito específicas que exijam que você altere isso, como se você precisar dar suporte ao IE 8 com muitos polyfills, pode pular esta etapa.

Para compilar o projeto, execute o seguinte comando:

babel src --out-dir dist

Para facilitar, crie um script npm para evitar ter que se lembrar e digitar o comando repetidamente. Adicione um campo "build" ao objeto "scripts" em seu package.json:

{
  "scripts": {
    "build": "babel src --out-dir dist"
  }
}

Assim, o comando é um pouco mais fácil de digitar e lembrar.

npm run build

Usando o Babel com o Webpack

Para empacotar com Webpack, existem mais alguns passos na configuração. Primeiro, precisamos instalar todas as dependências de que precisamos para Babel e Webpack.

• webpack é o código central do Webpack e webpack-cli fornece o comando webpack.
• @babel/core é o código central do Babel, uma dependência peer do babel-loader.
• babel-loader permite que você configure o Webpack para usar o Babel para transpilar seus arquivos.
• @babel/preset-env ajuda o Babel a identificar o que e como transpilar.

npm install webpack webpack-cli @babel/core babel-loader @babel/preset-env --save-dev

Agora, crie um arquivo .babelrc e configure-o com @babel/preset-env.

{
  "presets": ["@babel/preset-env"],
  "sourceMaps": true
}

Em seguida, se você tiver requisitos muito específicos sobre o que precisa suportar, talvez queira configurar o Browserslist para que o Babel (e outras bibliotecas) saibam quais recursos devem ser o alvo.

Por padrão, se você não configurar nada, o Browserslist usa uma configuração bastante razoável: > 0.5%, last 2 versions, Firefox ESR, not dead. A menos que você tenha circunstâncias muito específicas que exijam que você altere isso, como se você precisar dar suporte ao IE 8 com muitos polyfills, pode pular esta etapa.

E, finalmente, configure o Webpack criando um arquivo chamado webpack.config.js.

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /\/node_modules\//,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

Esta configuração assume que o arquivo de código-fonte para o ponto de entrada do aplicativo está em src/index.js, e isso gerará o bundle em dist/app.js.

Agora, para executar o bundler, basta executar este comando:

webpack -d --watch

Para facilitar, crie um script npm para evitar ter que se lembrar disso e digitá-lo toda vez. Adicione um campo "build" ao objeto "scripts" em seu package.json:

{
  "scripts": {
    "start": "webpack -d --watch"
  }
}

Assim, o comando é um pouco mais fácil de digitar e lembrar.

npm start

Para builds de produção, você deve minificar seus scripts. Felizmente, isso também é bem fácil: é apenas executar o Webpack com uma opção diferente.

webpack -p

Você também pode adicionar isso aos seus scripts npm, para que você possa executá-lo de forma rápida e fácil.

{
  "scripts": {
    "start": "webpack -d --watch",
    "build": "webpack -p"
  }
}

Assim, a execução se torna mais simples.

npm run build

E, claro, você também pode fazer isso em scripts de build de produção automáticos. Veja como ficaria se você estivesse usando Heroku, por exemplo:

{
  "scripts": {
    "start": "webpack -d --watch",
    "build": "webpack -p",
    "heroku-postbuild": "webpack -p"
  }
}