ES6+ na starších prohlížečích

Mithril.js je napsán v ES5, ale je plně kompatibilní s ES6 a novějšími verzemi. Všechny moderní prohlížeče jej nativně podporují, včetně nativní syntaxe modulů. (Nepodporují však magické řešení modulů Node, takže nemůžete použít import * as _ from "lodash-es" nebo podobné. Podporují pouze relativní a URL cesty.) Můžete tedy bez obav používat šipkové funkce pro vaše closure komponenty a komponenty tříd.

Pokud však potřebujete podporovat starší prohlížeče, jako je Internet Explorer, budete muset kód transpilovat do ES5. Tato stránka se zaměřuje na použití Babelu pro zajištění funkčnosti moderního ES6+ kódu na starších prohlížečích.

Nastavení

Nejprve se ujistěte, že máte nainstalovaný Node. Součástí instalace je i npm, který budeme potřebovat.

Po stažení Node otevřete terminál a spusťte následující příkazy:

# Nahraďte toto skutečnou cestou k vašemu projektu. Uzavřete ji do uvozovek, pokud obsahuje mezery,
# a do jednoduchých uvozovek, pokud jste na Linuxu/Macu a obsahuje kdekoli `$$`.
cd "/path/to/your/project"

# Pokud již máte `package.json`, přeskočte tento příkaz.
npm init

Nyní máte několik možností:

• Použít Babel samostatně, bez bundleru
• Použít Babel a bundlovat s Webpackem

Použití Babelu samostatně

Nejprve nainstalujte potřebné závislosti.

• @babel/cli nainstaluje základní logiku Babelu a příkaz babel.
• @babel/preset-env pomáhá Babelu určit, co a jak transpilovat.

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

Vytvořte soubor .babelrc a nakonfigurujte jej pomocí @babel/preset-env.

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

Pokud máte specifické požadavky na podporované prohlížeče, můžete konfigurovat Browserslist, aby Babel (a další knihovny) věděly, na jaké funkce se zaměřit.

Ve výchozím nastavení, pokud nic nekonfigurujete, Browserslist používá dotaz: > 0.5%, last 2 versions, Firefox ESR, not dead. Pokud nemáte specifické požadavky, které vyžadují změnu (například podpora IE 8 s mnoha polyfilly), tento krok přeskočte.

Pro kompilaci projektu spusťte následující příkaz:

babel src --out-dir dist

Pro usnadnění si můžete vytvořit npm skript. Přidejte pole "build" do objektu "scripts" ve vašem package.json:

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

Nyní je příkaz snazší napsat i zapamatovat si.

npm run build

Použití Babelu s Webpackem

Použití Webpacku pro bundlování vyžaduje více kroků. Nejprve nainstalujte všechny závislosti pro Babel i Webpack.

• webpack je základní kód Webpacku a webpack-cli poskytuje příkaz webpack.
• @babel/core je základní kód Babelu, závislost typu peer pro babel-loader.
• babel-loader umožňuje nastavit Webpack pro použití Babelu k transpilaci souborů.
• @babel/preset-env pomáhá Babelu určit, co a jak transpilovat.

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

Vytvořte soubor .babelrc a nakonfigurujte jej pomocí @babel/preset-env.

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

Pokud máte specifické požadavky na podporované prohlížeče, můžete konfigurovat Browserslist, aby Babel (a další knihovny) věděly, na jaké funkce se zaměřit.

Ve výchozím nastavení, pokud nic nekonfigurujete, Browserslist používá dotaz: > 0.5%, last 2 versions, Firefox ESR, not dead. Pokud nemáte specifické požadavky, které vyžadují změnu (například podpora IE 8 s mnoha polyfilly), tento krok přeskočte.

Vytvořte konfigurační soubor Webpacku s názvem 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',
        },
      },
    ],
  },
};

Tato konfigurace předpokládá, že zdrojový kód pro vstupní bod aplikace je v src/index.js, a vytvoří balíček do dist/app.js.

Pro spuštění bundleru spusťte následující příkaz:

webpack -d --watch

Pro usnadnění si můžete vytvořit npm skript. Přidejte pole "start" do objektu "scripts" ve vašem package.json:

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

Nyní je příkaz snazší napsat i zapamatovat si.

npm start

Pro produkční sestavení budete chtít minifikovat skripty. To je snadné: spusťte Webpack s jinou možností.

webpack -p

Můžete také přidat toto do svých npm skriptů.

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

Spuštění tohoto příkazu je pak snazší si zapamatovat.

npm run build

Stejný postup můžete použít i v automatických skriptech pro produkční sestavení. Zde je příklad pro Heroku:

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