aurelia / konfiguracja

Aurelia + jQuery + Bootstrap – konfiguracja

Kiedy zaczynałem zaprzyjaźniać się z Aurelią stanąłem przed problem użycia Aurelii z jQuery i bootstrapem. W wielu przykładach w kodzie widoku widniała linijka:

<require from="bootstrap/css/bootstrap.css"></require>

tylko, że użycie klas bootstrapa nie skutkowało oczekiwanym efektem podczas wyświetlania strony. Czyli cały czas było po inżyniersku.

Ponieważ przy każdym nowym projekcie od nowa konfiguruję Aurelię i zawsze muszę sobie przypominać to warto sobie taką przypominajkę zapisać w swoim pamiętniku.

Cała procedura składa się z kilku kroków, które spieszę tutaj przedstawić:
1. Instalujemy jquery i bootstrap, albo samego bootstrapa, który dociągnie sobie jQuery jako zależność.

npm install jquery --save-dev
npm install bootstrap --save-dev

2. W katalogu głównym projektu znajdujemy plik package.json i dopisuję do niego:

"overrides": {
  "npm:jquery@^3.0.0": {
  "format": "amd"
  }
}

3. Szukamy pliku aurelia.json i modyfikujemy lub dodajemy „dependencies” („bundles” jest po to, aby zorientować się, w którym miejscu dodać informacje o zależnościach bootstrap względem jQuery):

"bundles": [
{
  "name": "app-bundle.js",
  "source": [
    "[**/*.js]",
    "**/*.{css,html}"
  ],
  "dependencies": [
    "jquery",
    {
      "name": "bootstrap",
      "path": "../node_modules/bootstrap/dist",
      "main": "js/bootstrap.min",
      "deps": ["jquery"],
      "exports": "$",
      "resources": [
        "css/bootstrap.css",
        "js/bootstrap.min.js"
      ]
    }
  ]
},

I voila, u mnie działa :).

Czasami jednak możemy dostać komunikat, że bootstrap wymaga jQuery, ale ponowne uruchomienie aplikacji (au run) powoduje, samorozwiązanie problemu.

Leave a Reply

Your email address will not be published. Required fields are marked *