ES6+ na starszych przeglądarkach

Mithril.js jest napisany w ES5, ale jest w pełni kompatybilny z ES6 i nowszymi wersjami języka. Wszystkie nowoczesne przeglądarki obsługują go natywnie, włącznie z natywną składnią modułów. (Nie obsługują one jednak magicznej rozdzielczości modułów Node, więc nie można używać import * as _ from "lodash-es" lub podobnych. Obsługują tylko ścieżki względne oraz URL-e.) Możesz więc śmiało używać funkcji strzałkowych dla komponentów funkcyjnych i klas dla komponentów klasowych.

Jeśli jednak, jak wielu z nas, nadal musisz obsługiwać starsze przeglądarki, takie jak Internet Explorer, konieczne będzie przetranspilowanie kodu do ES5. Ta strona opisuje, jak użyć Babel, aby nowoczesny kod ES6+ działał na starszych przeglądarkach.

Konfiguracja

Najpierw, jeśli jeszcze tego nie zrobiłeś, upewnij się, że masz zainstalowany Node.js. Jest on dostarczany z preinstalowanym npm, który wkrótce będzie potrzebny.

Po pobraniu otwórz terminal i uruchom następujące polecenia:

# Zastąp to rzeczywistą ścieżką do twojego projektu. Umieść ją w cudzysłowie, jeśli zawiera spacje,
# a w apostrofach, jeśli jesteś na Linuksie/Macu i zawiera znaki `$`.
cd "/path/to/your/project"

# Jeśli masz już plik `package.json`, pomiń to polecenie.
npm init

Teraz możesz wybrać jedną z kilku różnych opcji:

• Użyj Babel samodzielnie, bez bundlera
• Użyj Babel i bundluj z Webpack

Używanie Babel samodzielnie

Najpierw musimy zainstalować kilka niezbędnych zależności.

• @babel/cli instaluje podstawową logikę Babel, a także polecenie babel.
• @babel/preset-env pomaga Babel zrozumieć, co transpilować i jak to robić.

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

Teraz utwórz plik .babelrc (lub babel.config.js) i skonfiguruj go za pomocą @babel/preset-env.

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

Na koniec, jeśli masz bardzo specyficzne wymagania dotyczące obsługiwanych przeglądarek, możesz skonfigurować Browserslist, aby Babel (i inne biblioteki) wiedział, jakie funkcje mają być celem.

Domyślnie, jeśli niczego nie skonfigurujesz, Browserslist używa dość rozsądnego zapytania: > 0.5%, last 2 versions, Firefox ESR, not dead. Chyba że masz bardzo specyficzne wymagania, które wymagają zmiany tego, na przykład jeśli musisz obsługiwać IE 8 z dużą ilością polyfilli, możesz pominąć ten krok.

Za każdym razem, gdy chcesz skompilować swój projekt, uruchom to polecenie, a wszystko zostanie skompilowane.

babel src --out-dir dist

Wygodnie jest użyć skryptu npm, aby nie musieć pamiętać i wpisywać tego za każdym razem. Dodaj pole "build" do obiektu "scripts" w swoim package.json:

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

Dzięki temu polecenie jest łatwiejsze do wpisania i zapamiętania.

npm run build

Używanie Babel z Webpack

Aby użyć Webpack do bundlowania, potrzebujesz kilku dodatkowych kroków. Najpierw musimy zainstalować wszystkie zależności potrzebne zarówno dla Babel, jak i Webpack.

• webpack to podstawowy kod Webpack, a webpack-cli udostępnia polecenie webpack.
• @babel/core to podstawowy kod Babel, zależność peer dla babel-loader.
• babel-loader pozwala Webpack używać Babel do transpilacji plików.
• @babel/preset-env pomaga Babel zrozumieć, co transpilować i jak to robić.

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

Teraz utwórz plik .babelrc (lub babel.config.js) i skonfiguruj go za pomocą @babel/preset-env.

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

Następnie, jeśli masz bardzo specyficzne wymagania dotyczące obsługiwanych przeglądarek, możesz skonfigurować Browserslist, aby Babel (i inne biblioteki) wiedział, jakie funkcje mają być celem.

Domyślnie, jeśli niczego nie skonfigurujesz, Browserslist używa dość rozsądnego zapytania: > 0.5%, last 2 versions, Firefox ESR, not dead. Chyba że masz bardzo specyficzne wymagania, które wymagają zmiany tego, na przykład jeśli musisz obsługiwać IE 8 z dużą ilością polyfilli, możesz pominąć ten krok.

Na koniec skonfiguruj Webpack, tworząc plik o nazwie 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',
        },
      },
    ],
  },
};

Ta konfiguracja zakłada, że plik kodu źródłowego dla punktu wejścia aplikacji znajduje się w src/index.js, a wygenerowany pakiet zostanie umieszczony w dist/app.js.

Teraz, aby uruchomić bundler, po prostu uruchom to polecenie:

webpack -d --watch

Wygodnie jest użyć skryptu npm, aby nie musieć pamiętać i wpisywać tego za każdym razem. Dodaj pole "start" do obiektu "scripts" w swoim package.json:

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

Dzięki temu polecenie jest łatwiejsze do wpisania i zapamiętania.

npm start

W przypadku kompilacji produkcyjnych warto zoptymalizować swoje skrypty. Na szczęście wystarczy uruchomić Webpack z inną opcją.

webpack -p

Możesz również dodać to do swoich skryptów npm, aby móc budować szybko i łatwo.

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

Dzięki temu uruchomienie kompilacji produkcyjnej jest łatwiejsze do zapamiętania.

npm run build

I oczywiście możesz to zrobić również w automatycznych skryptach kompilacji produkcyjnej. Oto jak to może wyglądać, jeśli używasz na przykład Heroku:

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