🏠 Home 🐥 @k33g_org rss All posts 🌍 Me Github

Faites de l’ES7 avec Babel-Node

Lorsque vous installez Babel (npm install --global babel), vous avez l’opportunité d’utiliser babel-node à la place de node, qui en gros fonctionne comme node mais avec du code ES6 (ou ES2015). En fait babel-node fait de la “on-the-fly transpilation”. Bien sûr, c’est à utiliser à titre expérimental.

Sources: cf. article de Axel Rauschmayer Using the ES6 transpiler Babel on Node.js

Précédemment (Faites de l’ES2015 et ES2016 dans votre navigateur, avec JSPM) j’expliquais comment utiliser les “class properties” et les “decorators” de ES7 (ou ES2016) dans votre navigateur. Aujourd’hui nous allons voir comment les utiliser avec babel-node.

.babelrc

En fait, c’est tout simple. Il vous suffit d’ajouter dans le répertoire de votre application un fichier .babelrc avec le contenu suivant:

{
  "optional": [
    "es7.decorators",
    "es7.classProperties"
  ]
}

… C’est tout!

Exemple d’utilisation avec Express

Voici un exemple de code que j’ai bricolé avec Express.

Préparation

Créez un fichier package.json avec ceci:

{
  "name": "es2016",
  "version": "1.0.0",
  "description": "",
  "author": "@k33g_org",
  "license": "MIT",
  "dependencies": {
    "body-parser": "^1.14.0",
    "express": "^4.13.3",
    "uuid": "^2.0.1"
  }
}

Et faites un npm install. Vous avez de quoi démarrer un projet Express.

Remarque: uuid permet de générer des identifiants uniques.

Application principale: app.js

Créez un fichier app.js en ES6:

import express from 'express';
import http from 'http';
import bodyParser from 'body-parser';

import snippetsController from './snippetsController.js';

let app = express(), httpPort = 8080;

app
  .use(bodyParser.urlencoded({extended: true}))
  .use(bodyParser.json())
  .use('/api/snippets', snippetsController)
  .listen(httpPort);
  
console.log(" Listening on: " + httpPort);

“Decorateurs” / Decorators

Il nous reste donc à coder notre contrôleur snippetsController.js mais avant, codons nos decorators (je vous laisse décortiquer le code). Créez un fichier controllerDecorators.js:

import express from 'express';

let router = express.Router();

export function Get(...getArgs) {
  return function(target, name, descriptor) {
    router.get(getArgs[0], (req, res) => descriptor.value(req, res));
  }
}

export function Post(...getArgs) {
  return function(target, name, descriptor) {
    router.post(getArgs[0], (req, res) => descriptor.value(req, res));
  }
}

export function Put(...getArgs) {
  return function(target, name, descriptor) {
    router.put(getArgs[0], (req, res) => descriptor.value(req, res));
  }
}

export function Delete(...getArgs) {
  return function(target, name, descriptor) {
    router.delete(getArgs[0], (req, res) => descriptor.value(req, res));
  }
}

export function WithRouter(target) {
  target.router = router
}

Utilisation

Maintenant nous pouvons enfin coder notre contrôleur (snippetsController.js):

import {Get, Post, Put, Delete, WithRouter} from './controllerDecorators';
import uuid from 'uuid';

let snippets = [
    {id: uuid.v1(), title: "Hello", language: "JavaScript", code: 'console.log("Hello World!");'}
  , {id: uuid.v1(), title: "Salut", language: "Java", code: 'System.out.println("Hello World!");'}
  , {id: uuid.v1(), title: "Yo", language: "Golo", code: 'println("Yo!")'}
  , {id: uuid.v1(), title: "Ola...", language: "Go", code: 'println("Ola...!")'}
];


@WithRouter
class SnippetsController {

  @Get('/')
  getAll(req, res) {
    res.json(snippets);
  }

  @Get('/:id')
  getOne(req, res) {
    res.json(snippets.find(snippet => snippet.id == req.params.id));
  }

  @Post('/')
  add(req, res) {
    let model = Object.assign(req.body, {id: uuid.v1()})
    snippets.push(model)
    res.json(model);
  }

  @Put('/:id')
  update(req, res) {
    let id = req.params.id;
    let indexOfTheModel = snippets.findIndex((snippet)=> { return snippet.id == id; });
    snippets[indexOfTheModel] = req.body;  
    res.json(snippets[indexOfTheModel]);
  } 

  @Delete('/:id')
  remove(req, res) {
    let indexOfTheModel = snippets.findIndex((snippet)=> { return snippet.id == req.params.id; });
    snippets.splice(indexOfTheModel, 1);
    res.json(req.params.id)
  } 

}

export default SnippetsController.router;

Et voilà. Personnellement, je trouve que cela simplifie grandement le code (et facilite la lecture). Souhaitons que ces fonctionnalités soient rapidement figées pour pouvoir réellement les utiliser.

@+

blog comments powered by Disqus