ES6+ en navegadores antiguos

Mithril.js está escrito en ES5, pero es totalmente compatible con ES6 y versiones posteriores. Los navegadores modernos lo soportan de forma nativa, incluso la sintaxis de módulos nativos. (No soportan la resolución de módulos "mágicos" de Node, por lo que no puede usar import * as _ from "lodash-es" o similar. Solo soportan rutas relativas y URLs). Por lo tanto, puede usar funciones flecha para sus componentes de cierre y clases para sus componentes de clase](./components.md).

Sin embargo, si necesita dar soporte a navegadores antiguos como Internet Explorer, deberá transpilación el código a ES5. Esta página explica cómo usar Babel para que el código moderno ES6+ funcione en navegadores antiguos.

Configuración

Primero, asegúrese de tener Node instalado. Incluye npm preinstalado, que necesitaremos.

Una vez que lo haya descargado, abra una terminal y ejecute los siguientes comandos:

# Reemplace esto con la ruta real a su proyecto. Use comillas si contiene espacios,
# y comillas simples si está en Linux/Mac y contiene `$$` en cualquier lugar.
cd "/ruta/a/su/proyecto"

# Si ya tiene un `package.json`, omita este comando.
npm init

Ahora, puede elegir una de estas dos opciones:

• Usar Babel de forma independiente, sin un bundler
• Usar Babel y empaquetar con Webpack

Usar Babel de forma independiente

Primero, necesitamos instalar un par de dependencias.

• @babel/cli instala la lógica central de Babel, así como el comando babel.
• @babel/preset-env ayuda a Babel a saber qué transpilar y cómo hacerlo.

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

Ahora, cree un archivo .babelrc y configúrelo con @babel/preset-env.

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

Si tiene requisitos muy específicos sobre la compatibilidad, es posible que desee configurar Browserslist para que Babel (y otras bibliotecas) sepan qué características deben ser compatibles.

De forma predeterminada, si no configura nada, Browserslist usa un criterio razonable: > 0.5%, last 2 versions, Firefox ESR, not dead. A menos que tenga circunstancias muy específicas que requieran que cambie esto, como si necesita soportar IE 8 con muchos polyfills, no se preocupe por este paso.

Siempre que desee compilar su proyecto, ejecute este comando y todo se compilará.

babel src --out-dir dist

Puede ser conveniente usar un script npm para no tener que recordar y escribir esto cada vez. Agregue un campo "build" al objeto "scripts" en su package.json:

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

Y ahora, el comando es más fácil de recordar y usar.

npm run build

Usar Babel con Webpack

Si desea usar Webpack para empaquetar, se requieren algunos pasos más para configurar. Primero, necesitamos instalar todas las dependencias que necesitamos tanto para Babel como para Webpack.

• webpack es el código central de Webpack y webpack-cli le da el comando webpack.
• @babel/core es el código central de Babel, una dependencia peer para babel-loader.
• babel-loader permite que Webpack use Babel para transpilar sus archivos.
• @babel/preset-env ayuda a Babel a saber qué transpilar y cómo hacerlo.

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

Ahora, cree un archivo .babelrc y configúrelo con @babel/preset-env.

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

Si tiene requisitos muy específicos sobre la compatibilidad, es posible que desee configurar Browserslist para que Babel (y otras bibliotecas) sepan qué características deben ser compatibles.

De forma predeterminada, si no configura nada, Browserslist usa un criterio razonable: > 0.5%, last 2 versions, Firefox ESR, not dead. A menos que tenga circunstancias muy específicas que requieran que cambie esto, como si necesita soportar IE 8 con muchos polyfills, no se preocupe por este paso.

Finalmente, configure Webpack creando un archivo llamado 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 configuración asume que el archivo de código fuente del punto de entrada de la aplicación se encuentra en src/index.js, y generará el paquete en dist/app.js.

Ahora, para ejecutar el bundler, simplemente ejecute este comando:

webpack -d --watch

Puede ser útil usar un script npm para no tener que recordar y escribir esto cada vez. Agregue un campo "start" al objeto "scripts" en su package.json:

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

Y ahora, el comando es más fácil de recordar y usar.

npm start

Para las compilaciones de producción, querrá minificar sus scripts. Afortunadamente, esto también es bastante fácil: simplemente ejecute Webpack con una opción diferente.

webpack -p

También puede agregar esto a sus scripts npm para compilar de forma rápida y sencilla.

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

Y así, ejecutar esto es más fácil de recordar.

npm run build

Este es un ejemplo de cómo podría verse si está usando Heroku, por ejemplo:

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