ES6+ öreg böngészőkön

A Mithril.js ES5-ben íródott, de teljes mértékben kompatibilis az ES6-tal és az újabb verziókkal is. Minden modern böngésző beépítetten támogatja, beleértve a natív modul szintaxist is. (Nem támogatják a Node speciális modul feloldását, így nem használhatsz import * as _ from "lodash-es" vagy hasonlót. Csak a relatív és URL útvonalakat támogatják.) Így nyugodtan használhatsz nyílfunkciókat a closure komponenseidhez és osztályokat az osztály komponenseidhez.

Ha sokakhoz hasonlóan még mindig támogatnod kell a korábbi böngészőket, például az Internet Explorert, akkor le kell transzpilálnod ES5-re. Ez az oldal bemutatja, hogyan teheted a modern ES6+ kódot működőképessé a régebbi böngészőkön a Babel használatával.

Beállítás

Először is, ha még nem tetted meg, ellenőrizd, hogy telepítve van a Node. Ehhez alapból tartalmazza az npm csomagkezelőt, amire hamarosan szükségünk lesz.

Miután letöltötted, nyiss meg egy terminált és futtasd ezeket a parancsokat:

# Cseréld ki ezt a projekt tényleges útvonalára. Tedd idézőjelbe, ha szóközöket tartalmaz,
# és egyszeres idézőjelbe, ha Linux/Mac rendszeren vagy, és bárhol tartalmaz `$$`-t.
cd "/path/to/your/project"

# Ha már van `package.json` fájlod, hagyd ki ezt a parancsot.
npm init

Most többféle módon is beállíthatod:

• Babel önálló használata, csomagoló (bundler) nélkül
• Babel használata csomagolóval, a Webpackkel

Babel önálló használata

Először is, telepítenünk kell néhány függő csomagot, amire szükségünk van.

• A @babel/cli telepíti a Babel alapvető logikáját és a babel parancsot is.
• A @babel/preset-env segít a Babelnek meghatározni, hogy mit és hogyan kell transzpilálnia.

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

Most hozz létre egy .babelrc fájlt, és konfiguráld a @babel/preset-env használatával.

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

Végül, ha nagyon konkrét követelményeid vannak arra vonatkozóan, hogy mit kell támogatnod, érdemes lehet konfigurálni a Browserslistet, hogy a Babel (és más könyvtárak) tudják, mely böngésző funkciókat kell megcélozni.

Alapértelmezés szerint, ha nem konfigurálsz semmit, a Browserslist egy ésszerű lekérdezést használ: > 0.5%, last 2 versions, Firefox ESR, not dead. Hacsak nincsenek nagyon speciális igényeid, amelyek megkövetelik ennek megváltoztatását, például ha az IE 8-at sok polyfill-lel kell támogatnod, ne foglalkozz ezzel a lépéssel.

Amikor transzpilálni szeretnéd a projektedet, futtasd ezt a parancsot, és minden transzpilálásra kerül.

babel src --out-dir dist

Kényelmesebb lehet egy npm script használata, így nem kell emlékezned a parancsra, és nem kell minden alkalommal begépelned. Adj hozzá egy "build" mezőt a package.json fájlod "scripts" objektumához:

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

Így a parancs könnyebben begépelhető és megjegyezhető.

npm run build

Babel használata a Webpackkel

Ha a Webpacket szeretnéd használni, akkor néhány további lépést kell elvégezni a beállításhoz. Először is, telepítenünk kell az összes függőséget, amire szükségünk van a Babelhez és a Webpackhez is.

• A webpack a Webpack alapvető kódja, a webpack-cli pedig a webpack parancsot adja meg.
• A @babel/core a Babel alapvető kódja, a babel-loader függősége.
• A babel-loader lehetővé teszi, hogy a Webpack a Babel segítségével transzpilálja a fájlokat.
• A @babel/preset-env segít a Babelnek meghatározni, hogy mit és hogyan kell transzpilálnia.

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

Most hozz létre egy .babelrc fájlt, és konfiguráld a @babel/preset-env használatával.

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

Ezután, ha nagyon konkrét követelményeid vannak arra vonatkozóan, hogy mit kell támogatnod, érdemes lehet konfigurálni a Browserslistet, hogy a Babel (és más könyvtárak) tudják, mely böngésző funkciókat kell megcélozni.

Alapértelmezés szerint, ha nem konfigurálsz semmit, a Browserslist egy ésszerű lekérdezést használ: > 0.5%, last 2 versions, Firefox ESR, not dead. Hacsak nincsenek nagyon speciális igényeid, amelyek megkövetelik ennek megváltoztatását, például ha az IE 8-at sok polyfill-lel kell támogatnod, ne foglalkozz ezzel a lépéssel.

Végül állítsd be a Webpacket egy webpack.config.js nevű fájl létrehozásával.

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',
        },
      },
    ],
  },
};

Ez a konfiguráció feltételezi, hogy az alkalmazás belépési pontjának forráskód fájlja a src/index.js fájlban található, és a bundle-t a dist/app.js fájlba fogja kiírni.

Most, a bundler futtatásához csak futtasd ezt a parancsot:

webpack -d --watch

Kényelmesebb lehet egy npm script használata, így nem kell emlékezned a parancsra, és nem kell minden alkalommal begépelned. Adj hozzá egy "start" mezőt a package.json fájlod "scripts" objektumához:

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

Így a parancs könnyebben begépelhető és megjegyezhető.

npm start

Termelési build-ekhez tömörítened kell a scripteket. Szerencsére ez is elég egyszerű: csak a Webpacket kell futtatni egy másik opcióval.

webpack -p

Érdemes lehet ezt is hozzáadni az npm scriptekhez, hogy gyorsan és egyszerűen felépíthesd.

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

Így ezt könnyebb megjegyezni.

npm run build

És természetesen ezt automatikus termelési build scriptekben is megteheted. Így nézhet ki például, ha a Heroku szolgáltatást használod:

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