ES6+ sur les navigateurs anciens

Mithril.js est écrit en ES5, mais il est entièrement compatible avec ES6 et les versions ultérieures. La plupart des navigateurs modernes le prennent en charge nativement, y compris la syntaxe des modules natifs. (Cependant, la résolution de modules de Node n'est pas supportée, vous ne pouvez donc pas utiliser import * as _ from "lodash-es" ou une syntaxe similaire. Seuls les chemins relatifs et les URL sont pris en charge.) Vous pouvez donc utiliser librement les fonctions fléchées pour vos composants fonctionnels et les classes pour vos composants de classe.

Néanmoins, si vous devez prendre en charge des navigateurs plus anciens comme Internet Explorer, une étape de transpilation vers ES5 est nécessaire. Cette page explique comment utiliser Babel pour que votre code ES6+ moderne fonctionne sur ces navigateurs.

Configuration

Assurez-vous d'abord que Node est installé. Il est fourni avec npm, dont nous aurons besoin.

Après l'installation, ouvrez un terminal et exécutez les commandes suivantes :

# Remplacez ceci par le chemin d'accès réel à votre projet. Entourez-le de guillemets s'il contient des espaces,
# et de guillemets simples si vous êtes sous Linux/Mac et qu'il contient un `$$`.
cd "/path/to/your/project"

# Si vous avez déjà un `package.json`, ignorez cette commande.
npm init

Vous pouvez maintenant choisir l'une des deux approches suivantes :

• Utiliser Babel de manière autonome, sans bundler
• Utiliser Babel avec Webpack pour le bundling

Utiliser Babel en mode autonome

Nous devons d'abord installer les dépendances nécessaires.

• @babel/cli installe la logique de base de Babel ainsi que la commande babel.
• @babel/preset-env aide Babel à déterminer quoi et comment transpiler, en fonction de l'environnement cible.

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

Créez ensuite un fichier .babelrc et configurez-le avec @babel/preset-env.

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

Enfin, si vous avez des exigences très spécifiques concernant les navigateurs à prendre en charge, vous pouvez configurer Browserslist afin que Babel (et d'autres bibliothèques) sachent quelles fonctionnalités cibler.

Par défaut, si vous ne configurez rien, Browserslist utilise une requête raisonnable : > 0.5%, last 2 versions, Firefox ESR, not dead. À moins que vous n'ayez des besoins très spécifiques qui vous obligent à modifier cela, comme la prise en charge d'IE 8 avec de nombreux polyfills, vous pouvez ignorer cette étape.

Pour compiler votre projet, exécutez la commande suivante :

babel src --out-dir dist

Pour éviter de devoir la taper à chaque fois, il est pratique d'utiliser un script npm. Ajoutez un champ "build" à l'objet "scripts" dans votre package.json :

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

La commande devient alors plus simple :

npm run build

Utiliser Babel avec Webpack

Si vous souhaitez utiliser Webpack pour le bundling, la configuration nécessitera quelques étapes supplémentaires. Nous devons d'abord installer toutes les dépendances nécessaires pour Babel et Webpack.

• webpack est le code de base de Webpack et webpack-cli fournit la commande webpack.
• @babel/core est le code de base de Babel, une dépendance peer pour babel-loader.
• babel-loader permet d'indiquer à Webpack comment utiliser Babel pour transpiler vos fichiers.
• @babel/preset-env aide Babel à déterminer quoi et comment transpiler, en fonction de l'environnement cible.

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

Créez ensuite un fichier .babelrc et configurez-le avec @babel/preset-env.

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

Ensuite, si vous avez des exigences très spécifiques concernant les navigateurs à prendre en charge, vous pouvez configurer Browserslist afin que Babel (et d'autres bibliothèques) sachent quelles fonctionnalités cibler.

Par défaut, si vous ne configurez rien, Browserslist utilise une requête raisonnable : > 0.5%, last 2 versions, Firefox ESR, not dead. À moins que vous n'ayez des besoins très spécifiques qui vous obligent à modifier cela, comme la prise en charge d'IE 8 avec de nombreux polyfills, vous pouvez ignorer cette étape.

Configurez ensuite Webpack en créant un fichier appelé 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',
        },
      },
    ],
  },
};

Cette configuration suppose que le fichier source du point d'entrée de l'application se trouve dans src/index.js, et que le bundle sera généré dans dist/app.js.

Pour exécuter le bundler, exécutez simplement la commande suivante :

webpack -d --watch

Pour éviter de devoir vous en souvenir et la taper à chaque fois, il est pratique d'utiliser un script npm. Ajoutez un champ "start" à l'objet "scripts" dans votre package.json :

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

La commande devient alors plus facile à retenir :

npm start

Pour les builds de production, il est conseillé de minifier vos scripts. Heureusement, c'est assez simple : il suffit d'exécuter Webpack avec une option différente.

webpack -p

Vous pouvez également ajouter ceci à vos scripts npm, pour un build rapide et facile.

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

L'exécution de cette commande devient alors plus facile à retenir :

npm run build

Bien sûr, vous pouvez également intégrer cela dans des scripts de build de production automatisés. Voici un exemple de ce à quoi cela pourrait ressembler si vous utilisez Heroku :

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