Aurelian käyttöönotto

Tässä postauksessa on esitetty keinot saada nopeasti näppituntumaa Aureliaan. Jotta pääset alkuun, tarvitset suosikkitekstieditorisi. Esimerkiksi Atom on hyvä open source koodieditori.

Ensimmäinen tarvittava komponentti on Node.js. Sen saat ladattua täältä: nodejs.org. Aurelia ei itse tarvitse nodea, vaan suurin osa käytettävistä työkaluista ajetaan noden päällä. Voit tarkistaa asennuksen onnistumisen ajamalla seuraavan käskyn komentoriviltä:

npm

Seuraavaksi otamme käyttöön jspm paketinhallintatyökalun. Jspm (=javascript package manager) toimii loistavasti yhteen Aurelian kanssa ja helpottaa tarvittavien javascript-komponenttien käyttöönottoa. Asennetaan jspm noden globaaliksi moduuliksi:

npm install –g jspm

Miksi globaali? Tulet tarvitsemaan jspm:ää kaikissa aurelia-projekteissa tulevaisuudessakin, joten globaalina se on käytössä kaikkialla missä nodekin. Lokaali node-moduuli on käytössä vain siinä projektissa mihin se on asennettu.

Nyt on aika siirtyä projektikansioon. Tee sellainen, jos ei ole vielä. Nyt siis meillä on tyhjä kansio, johon alamme rakentamaan Aurelia-projektia. Aurelia on itsessäänkin jaettu jspm pakettina, joten käytämme sitä Aurelia frameworkin asentamiseen. Ennen Aurelia paketin hakemista tarvitsee projektikansio alustaa jspm:n käyttöä varten. Aja tämä siis seuraavaksi:

jspm init

Voit käyttää kaikkiin asetuksiin default-arvoja:

Package.json file does not exist, create it? [yes]:
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:
Enter server baseURL (public folder path) [./]:
Enter jspm packages folder [.\jspm_packages]:
Enter config file path [.\config.js]:
Configuration file config.js doesn't exist, create it? [yes]:
Enter client baseURL (public folder URL) [/]:
Which ES6 transpiler would you like to use, Traceur or Babel? [babel]:

Jspm on nyt valmis asentamaan paketteja. Haetaan siis Aurelian tarvitsemat paketit:

jspm install aurelia-framework
jspm install aurelia-bootstrapper

Jes, meillä on aurelia asennettuna, mutta mitä nyt? Selaimet syövät html-sivuja, joten tehdään sellainen. Tee hakemiston juureen index.html:

<html>
<head>
  <title>Aurelia hello world!</title>
</head>
<body aurelia-app>
  <script src="jspm_packages/system.js"></script>
  <script src="config.js"></script>
  <script>
    System.import("aurelia-bootstrapper"); 
  </script>
</body>
</html>

Bodyssä oleva aurelia-app kertoo, että tämä sivu toimii aurelian pohjana. Sille voi antaa parametrejä, joilla ohjataan Aureliaa, mutta nyt meille riittää tämä. Käytössä on system.js, joka osaa ladata moduuleja ja config.js kertoo projektin riippuvuudet. Aurelia-bootstrapper käynnistää frameworkin. Joko ollaan perillä? Ei ihan vielä. Meillä on vasta html:ää. Aletaan koodaamaan EcmaScript6:sta. Tee projektikansioon src-hakemisto ja sen alle app.js -tiedosto:

export class App {
  contructor() {
    this.message = '';
  }

  activate() {
    this.message = 'Hello world!';
  }
}

Aurelia käyttää View/View-model arkkitehtuuria, eli tehdään meidän view-modelille vielä oma view. Luo samaiseen src-kansioon app.html:

<template>
<div>
  <h1>${message}</h1>
</div>
</template>

Html:ssä oleva template-tag kertoo parserille, että se on Aureliaa varten tehty view. ${message} kutsuu view-modelin message-propertyä ja käyttää siinä olevaa arvoa. Aurelian bindaus-koneisto osaa vaihtaa arvon sivulle, kun se muuttuu view-modelissa. ES6 on hienoa, mutta eihän nämä nykyiset selaimet vielä ymmärrä sitä. ES6 pitää siis kääntää nykyisen ES5 standardin mukaiseksi javascriptiksi. Jspm init:n yhteydessä oli jo valinta ES6 transpilerin valinnaksi. Babel on hyvä työkalu tähän hommaan. Seuraavaksi siis valjastetaan Babel kääntämään ES6 koodi ES5:n mukaiseksi. Aloitetaan asentamalla Gulp, joka on näppärä automatisointityökalu. Tämäkin globaalisti tulevaisuutta varten.

npm install -g gulp

Gulpia ohjataan luomalla javascript-tiedosto "gulpfile.js" projektikansion juureen:

var gulp = require('gulp');

gulp.task('build', function() {
});

Gulp voi käyttää muita npm paketteja, kun ne pyydetään gulp-tiedoston alussa require-käskyllä. Tarvitsemme kääntämistä varten muutaman uuden npm-paketin. Paketit voidaan asentaa yksi kerrallaan "npm install {paketti}"-komennolla tai sitten lisäämällä viittaukset package.json-tiedostoon ja asentamalla kerralla kaikki puuttuvat paketit. Editoidaan package.json-tiedostoa seuraavasti:

{
  "devDependencies": {
    "browser-sync": "^2.7.12",
    "del": "^1.2.0",
    "gulp": "^3.9.0",
    "gulp-babel": "^5.1.0",
    "gulp-changed": "^1.2.1",
    "gulp-plumber": "^1.0.1",
    "object.assign": "^3.0.0",
    "require-dir": "^0.3.0",
    "run-sequence": "^1.1.1",
    "vinyl-paths": "^1.0.0"
  },
  "jspm": {
    "directories": {},
    "dependencies": {
      "aurelia-bootstrapper": "github:aurelia/bootstrapper@^0.13.1",
      "aurelia-framework": "github:aurelia/framework@^0.12.0"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.1.13",
      "babel-runtime": "npm:babel-runtime@^5.1.13",
      "core-js": "npm:core-js@^0.9.4"
    }
  }
}

Nyt voit asentaa puuttuvat paketit:

npm install

Palataan takaisin gulp-tiedostoon ja lisätään puuttuvat muutokset.

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var changed = require('gulp-changed');
var to5 = require('gulp-babel');
var browserSync = require('browser-sync');
var runSequence = require('run-sequence');
var vinylPaths = require('vinyl-paths');
var del = require('del');
var assign = Object.assign || require('object.assign');

var path = {
  source: 'src/**/*.js',
  html: 'src/**/*.html',
  output: 'dist/'
};

var compilerOptions = {
  modules: 'system',
  moduleIds: false,
  comments: false,
  compact: false,
  stage:2,
  optional: [
    "es7.decorators",
    "es7.classProperties"
  ]
};

gulp.task('clean', function () {
  return gulp.src([path.output])
  .pipe(vinylPaths(del));
});

gulp.task('build-js', function () {
  return gulp.src(path.source)
  .pipe(plumber())
  .pipe(changed(path.output, { extension: '.js' }))
  .pipe(to5(assign({}, compilerOptions, { modules: 'amd' })))
  .pipe(gulp.dest(path.output))
  .pipe(browserSync.reload({ stream: true }));
});

gulp.task('build-html', function () {
  return gulp.src(path.html)
  .pipe(changed(path.output, { extension: '.html' }))
  .pipe(gulp.dest(path.output))
  .pipe(browserSync.reload({ stream: true }));
});

gulp.task('build', function (callback) {
  return runSequence('clean', ['build-js', 'build-html'], callback);
});

gulp.task('serve', ['build'], function (done) {
  browserSync({
    open: false,
    port: 9000,
    server: {
      baseDir: ['.'],
      middleware: function (req, res, next) {
        res.setHeader('Access-Control-Allow-Origin', '*');
        next();
      }
    }
  }, done);
});

gulp.task('watch', ['serve'], function () {
  var watcher = gulp.watch([path.source, path.html], ['build']);
  watcher.on('change', function (event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });
});

Yllä luodaan omat tehtävät javascriptille ja html:lle. Javascript käännetään Babelin avulla ES5:ksi. Huomaa myös path objekti, johon tallennetaan polut lähdekoodille. Jos oma kansiorakenteesi on erilainen, niin päivitä tähän oikeat polut. Palataan gulp-tiedostoon ja sen mahdollisuuksiin tarkemmin toisessa blogi-postauksessa. Nyt voit kääntää javascriptin suorittamalla komentoriviltä:

gulp build

Voit ajaa tätä käskyä uudelleen, kun olet tehnyt muutoksia ja lopputuloksen näet dist-kansiossa. Dist-kansioon kerätään nyt käännetyt ES5 javascript-tiedostot. Tehdään vielä pieni muutos config.js tiedostoon, jotta Aurelia osaa etsiä näitä tiedostoja oikeasti paikasta:

"paths": {
   "*": "dist/**/*.js",
   "github:*": "jspm_packages/github/*.js",
   "npm:*": "jspm_packages/npm/*.js"
}

Aurelia käyttää siis system.js:ää tiedostojen lataamiseen ja paths-osio kertoo mistä system.js voi ladata tiedostoja. Ensimmäisellä rivillä voidaan kertoa mistä applikaation koodit löytyvät. Kokeillaanpa nyt toista gulp-käskyä:

gulp watch

Watch-tehtävä seuraa js ja html tiedostojen muutoksia ja osaa kutsua build-tehtävää automaattisesti havaitessaan muutoksia tiedostoissa. Samalla käynnistyy browser-sync, jota voidaan käyttää devausympäristössä serverinä ja se osaa samalla päivittää selaimessa näkyvän sivun automaattisesti muutosten jälkeen. Käynnistä nyt selain ja suuntaa osoitteeseen http://localhost:9000

Hetken lataamisen jälkeen ruudulle ilmestyy "Hello world!"-teksti ja ensimmäinen Aurelia app on valmis! Nyt olet saanut Aurelian käyntiin ja voit alkaa kokeilla mitä kaikkea uutta ES6 ja Aurelia tarjoaa. Seuraa tätä blogia, niin saat jatkossakin lisää hyviä vinkkejä ja ohjeita mitä kaikkea Aurelialla voi tehdä.

Author

Jukka

comments powered by Disqus