Bundlowanie i numerowanie wersji produkcyjnych w Aurelii (cz. 1)

W Aurelii, tak jak w przypadku każdego nowoczesnego frameworka JS’owego, musimy stawić czoła konieczności transpilowania kodu oraz tworzenia bundli produkcyjnych.

W Aureli najłatwiej togo dokonać za pomocą metody wbudowanej w Aurelia CLI (Command Line Tools) — au build . O tym jednak kiedy indziej, ponieważ ja na codzień używam szkieletów aplikacji — w szczególności tego opartego o Aurelia Materialize Bridge. Zarówno w nim jak i w szkielecie Bootstrap’owym, bundle i export aplikacji jest dokonywany za pomocą popularnego task-runera Gulp.

Na dobrą sprawę wystarczy wpisać gulp export i nasza wyeksportowana i zbundlowana aplikacja trafi do katalogu /export. Jednakże warto wiedzieć o kilku ustawieniach.

Najważniejsze z nich znajdują się w dwóch plikach w katalogu /build — exports.json i bundles.json.

bundles.json

W nim znajdują się instrukcje, dzięki którym bundler wie co chcemy połączyć w paczki, pozwala nam także stworzyć kilka osobnych bundli oraz zastosować kilka opcji. Poniżej przykład tworzący dwa pliki app-build.js oraz aurelia.js, w pierwszym z nich znajduje się nasz kod wraz z CSS oraz HTMLem, a w drugim wszystkie pluginy. Dzięki temu rzadziej zmieniany bundle (drugi) może być np. cachowany przez przeglądarki.

"bundles": {
  "dist/app-build": {
    "includes": [
      "[**/*.js]",
      "**/*.html!text",
      "**/*.css!text"
    ],
    "options": {
      "inject": true,
      "minify": true,
      "depCache": false,
      "rev": true
    }
  },
  "dist/aurelia": {
    "includes": [
      "aurelia-framework",
      "aurelia-bootstrapper"
],
   "options": {
      "inject": true,
      "minify": true,
      "depCache": false,
      "rev": true
    }
  }
}

Każdy z bundli posiada swojeoptions”:

  • inject — jeśli jest true bundle dodawany jest do config.js co w większości przypadków jest nasza intencją
  • minify — decydujemy czy minifikowac plik
  • depCache — włącza cachowanie zależności w celu zapobiegnięcia opóźnień przy ładowania bundla
  • rev — dodaje numer na końcu bundla dzięki czemu możemy je cachować — przy każdej zmianie bundle ma inna nazwę

Kolejny plik exports.json omówimy w kolejnym poście :)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.