Angular 2 - Ecrire son application avec JSPM & Babel

 Cet article va se reposer sur l'application "superheroes" que j'avais écrit pour les articles suivants:


Dans le premier article de la série, nous étions parti sur JSPM & TypeScript qui est le plus poussé par les équipes Angular.

Personnellement, j'aime bien Babel. Ce dernier évolue très rapidement et possède de nombreux plugins permettant de gérer un grand nombre de fonctionnalités ES6 / ES7.

Du coup, au tout début, j'avais plutôt envie pour mon application de super-héros de l'utiliser. Le hic est qu'il y avait une incompatibilité entre JSPM et les plugins Babel. En effet, il n'était pas possible de charger les plugins Babel via JSPM.

Désormais, cela est corrigé depuis https://github.com/jspm/jspm-cli/releases/tag/0.17.0-beta.4. En effet, dorénavant, les loader des transpilers sont différents, notamment celui de Babel qui se reposent sur le plugin de SystemJs pour Babel. Cela afin de pouvoir mieux gérer les plugins Babel.

Le code à modifier

Bon, il va y avoir un peu de code à modifier. Pour ce faire, il faut tout d'abord modifier le service "app/services/superheroes" où l'annotation "@Injectable()" n'est pas présent, ce qui n'est pas conforme à Angular 2 (même si cela fonctionnait avec la version TypeScript !).

En revanche, c'est l'injection du service qui change. Au lieu d'utiliser l'annotation "@Inject" sur les paramètres du constructeur:

/** * @constructor * @param {SuperHeroesService} superHeroesService */constructor(@Inject(SuperHeroesService) superHeroesService) {
    this.superHeroesService = superHeroesService;
}

Nous allons plutôt privilégié l'approche "type assertion" où le typage du paramètre servira pour l'injection:

/** * @constructor * @param {SuperHeroesService} superHeroesService */constructor(superHeroesService: SuperHeroesService) {
    this.superHeroesService = superHeroesService;
}


JSPM & Babel

Là, ça va être un peu plus compliqué. Tout d'abord, installé la version de jspm qui permet de gérer mieux les plugins Babel:

> npm install -g jspm@0.17.0-beta.5


Ensuite, nous allons régénérer les fichiers de configuration de JSPM:
> jspm init




Là, nous allons avoir deux fichiers:
  • jspm.browser.js
  • jspm.config.js
Il faudra d'abord charger le fichier "jspm.browser.js" avant celui de "jspm.config.js".

Ensuite, nous allons modifier "jspm.browser.js" en:
  • Modifiant la baseURL (en la mettant vide)
  • En indiquant le fait que nous omettons l'extension des fichiers JavaScript lors de l'import

SystemJS.config({
  baseURL: "",
  defaultJSExtensions: true,
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*",
    "angular2-superheroes-babel/": "app/"  }
});



Maintenant, nous allons installé l'ensemble des plugins / frameworks nécessaires à notre développement.

Tout d'abord ceux pour angular2:

> jspm install angular2 core-js css reflect-metadata npm:@reactivex/rxjs

Puis ceux pour babel:

> jspm install npm:angular2-annotations npm:babel-plugin-transform-class-properties npm:babel-plugin-transform-flow-strip-types


Et enfin, modifier le fichier "jspm.config.js" afin d'ajouter les options suivantes pour Babel via JSPM (la section "babelOptions"):

SystemJS.config({
        packageConfigPaths: [
                "npm:@*/*.json",
                "npm:*.json",
                "github:*/*.json"        ],
        globalEvaluationScope: false,
        transpiler: "plugin-babel",
        babelOptions: {
                "stage": 0,
                "optional": [
                        "runtime",
                        "optimisation.modules.system",
                        "es7.decorators"                ],
                "plugins": [
                        "babel-plugin-angular2-annotations",
                        "babel-plugin-transform-decorators-legacy",
                        "babel-plugin-transform-flow-strip-types",
                        "babel-plugin-transform-class-properties"                ]
        },



Et notre application fonctionnera :)

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

ISO: liens & outils utiles

Image
Voici quelques normes ISO à connaître et que vous aurez à faire face dans vos développements. Et quelques liens / outils permettant de s'assurer que nous faisons correctement leurs intégrations Code Pays https://countrycode.org/ est super site qui permet de lister les pays du monde avec leur country code (en mode number et iso): Et par pays, nous pouvons avoir des informations supplémentaires, comme le format téléphone, la position géographique, la time zone, la monnaie, etc: Ce site du coup regroupe les country code: En ISO 3166 name (où un nom est attribué à un pays) En ISO 3166 numeric (où un chiffre numérique est attribué à un pays) En ISO 3166-1 alpha-2 (code en 2 alpha majuscule) En ISO 3166-1 alpha-3 (code en 3 alpha majuscule) Ainsi que les langues. Tout cela est d'ailleurs regroupés dans ce fichier téléchargeable . Code langue / locale Là, nous tombons dans un des plus grands soucis d'un développeur: co...
Lire la suite

NodeJs et SSL: une petite analyse

Le but de cet article est de faire un petit tour d'horizon de l'usage de SSL dans nos applications NodeJs, en l'occurence, quand nous souhaitons faire une application Web, une API REST, ou les deux. Nous allons avoir 6 étapes pour de réalisation d'un serveur NodeJs, avec à chaque fois 12 clients: Un client NodeJs sans certificats SSL - strictSSL à false Un client NodeJs sans certificats SSL - strictSSL à true Un client NodeJs avec un certificat SSL client non fiable - strictSSL à false Un client NodeJs avec un certificat SSL client non fiable - strictSSL à true Un client NodeJs avec un certificat SSL server non fiable - strictSSL à false Un client NodeJs avec un certificat SSL server non fiable - strictSSL à true Un client NodeJs avec un certificat SSL client fiable - strictSSL à false Un client NodeJs avec un certificat SSL client fiable - strictSSL à true Un client NodeJs avec un certificat SSL serveur fiable - strictSSL à false...
Lire la suite

Créer sa commande slack en quelques minutes

Image
Le but de cet article est de vous montrer que très simplement, nous pouvons créer une commande personnalisée pour Slack. Ici, nous allons afficher des chats :)" Tout d'abord, nous allons nous créer des comptes sur: Slack:  https://slack.com Heroku:  http://www.heroku.com/ qui permettra d'héberger notre service REST pour Slack Gitlab: https://gitlab.com  qui permet évidemment d'héberger notre code, mais qui pourra de manière automatiser déployer notre application sur Heroku à chaque commit (et cela, même en mode "gratuit") Concentrons-nous tout d'abord sur Heroku et Gitlab. Créons un compte Heroku. Une fois cela fait, aller dans votre compte :. Vous verrez alors une section nommée "API key": Cliquez sur "Reveal" pour voir la valeur et conservez la bien en mémoire. Ensuite, sur en retournant sur votre dashboard d'applications Heroku , cliquez sur "New" et créez une nouvelle application. Dans...
Lire la suite