ES6+ su browser legacy

Mithril.js è scritto in ES5, ma è pienamente compatibile con ES6 e versioni successive. Tutti i browser moderni lo supportano nativamente, inclusa la sintassi dei moduli nativi. (Non supportano la risoluzione automatica dei moduli di Node, quindi non puoi usare import * as _ from "lodash-es" o simili. Supportano solo percorsi relativi e URL.) Puoi quindi utilizzare liberamente arrow functions per i tuoi closure components e classi per i tuoi componenti di classe.

Tuttavia, se come molti di noi, hai ancora la necessità di supportare browser meno recenti come Internet Explorer, dovrai convertire il codice a ES5. Questa pagina spiega come farlo usando Babel per rendere il codice ES6+ moderno compatibile con i browser più datati.

Setup

Innanzitutto, se non l'hai già fatto, assicurati di avere Node installato. Viene fornito con npm preinstallato, che ci servirà a breve.

Una volta scaricato, apri un terminale ed esegui questi comandi:

# Sostituisci questo con il percorso effettivo del tuo progetto. Racchiudilo tra virgolette se contiene spazi,
# e tra virgolette singole se sei su Linux/Mac e contiene un `$$` da qualche parte.
cd "/path/to/your/project"

# Se hai già un file `package.json`, puoi saltare questo comando.
npm init

Ora, puoi seguire uno dei due percorsi diversi:

• Usa Babel standalone, senza alcun bundler
• Usa Babel e un bundler come Webpack

Usare Babel standalone

Innanzitutto, dobbiamo installare alcune dipendenze necessarie.

• @babel/cli installa la logica principale di Babel e il comando babel.
• @babel/preset-env aiuta Babel a identificare quali conversioni applicare e come farlo.

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

Ora, crea un file .babelrc e configuralo con @babel/preset-env.

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

Infine, se hai requisiti particolarmente specifici riguardo ai browser da supportare, potresti voler configurare Browserslist in modo che Babel (e altre librerie) sappiano quali funzionalità devono essere supportate.

Per impostazione predefinita, se non configuri nulla, Browserslist utilizza un criterio ragionevole: > 0.5%, last 2 versions, Firefox ESR, not dead. A meno che tu non abbia esigenze particolari che richiedano di modificare questo comportamento, come il supporto per IE 8 con molti polyfill, puoi tralasciare questo passaggio.

Ogni volta che vuoi compilare il tuo progetto, esegui questo comando:

babel src --out-dir dist

Potrebbe essere utile usare uno script npm per evitare di doverlo ricordare e digitare ogni volta. Aggiungi un campo "build" all'oggetto "scripts" nel tuo package.json:

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

Ora, il comando è più facile da digitare e ricordare.

npm run build

Usare Babel con Webpack

Se vuoi usare Webpack per il bundling, sono necessari alcuni passaggi aggiuntivi. Innanzitutto, dobbiamo installare tutte le dipendenze necessarie sia per Babel che per Webpack.

• webpack è il codice principale di Webpack e webpack-cli ti fornisce il comando webpack.
• @babel/core è il codice principale di Babel, una dipendenza peer per babel-loader.
• babel-loader permette a Webpack di usare Babel per transpilare i tuoi file.
• @babel/preset-env aiuta Babel a identificare quali conversioni applicare e come farlo.

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

Ora, crea un file .babelrc e configuralo con @babel/preset-env.

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

Successivamente, se hai requisiti particolarmente specifici riguardo ai browser da supportare, potresti voler configurare Browserslist in modo che Babel (e altre librerie) sappiano quali funzionalità devono essere supportate.

Per impostazione predefinita, se non configuri nulla, Browserslist utilizza un criterio ragionevole: > 0.5%, last 2 versions, Firefox ESR, not dead. A meno che tu non abbia esigenze particolari che richiedano di modificare questo comportamento, come il supporto per IE 8 con molti polyfill, puoi tralasciare questo passaggio.

Infine, configura Webpack creando un file chiamato 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',
        },
      },
    ],
  },
};

Questa configurazione prevede che il file sorgente principale dell'applicazione sia in src/index.js. Il bundle verrà generato in dist/app.js.

Ora, per eseguire il bundler, esegui semplicemente questo comando:

webpack -d --watch

Potrebbe essere utile usare uno script npm per evitare di doverlo ricordare e digitare ogni volta. Aggiungi un campo "start" all'oggetto "scripts" nel tuo package.json:

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

Ora, il comando è più facile da digitare e ricordare.

npm start

Per le build di produzione, è consigliabile minimizzare i tuoi script. Fortunatamente, basta eseguire Webpack con un'opzione diversa.

webpack -p

Potresti anche voler aggiungere questo ai tuoi script npm, in modo da poterlo compilare rapidamente e facilmente.

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

Sarà quindi più facile ricordare come eseguirlo.

npm run build

Naturalmente, puoi farlo anche negli script di build di produzione automatici. Ecco come potrebbe apparire se stai usando Heroku, ad esempio:

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