Como usar Transpiladores em Node (Babel, TypeScript + Grunt, WebPack)

Sites Node.js
1

Babel

Para rodar o babel é preciso tomar cuidado com um parâmetro “postinstall”: “babel-node index.js” dentro do seu package.json. Como os arquivos escritos com o Babel precisam ser compilados, é preciso fazer essa configuração. Veja abaixo um exemplo de package.json configurado da forma correta.

{
  "name": "babelandnode",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index",
    "postinstall": "babel-node index.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-latest": "^6.24.1"
  }
}

TypeScript + Grunt

Para rodar o TypeScript é preciso tomar cuidado com um parâmetro dentro do seu package.json. A configuração que você deve se atentar é a “postinstall”: “grunt” .

Essa configuração é feita para que o TypeScript seja compilado antes de começar a ser executado pelo Node.JS . Segue um exemplo de package.json configurado da forma correta

{
  "name": "heros",
  "description": "The tour of heros",
  "version": "1.0.0",
  "private": true,
  "author": "Brian Love",
  "scripts": {
    "dev": "NODE_ENV=development nodemon ./bin/www",
    "grunt": "grunt",
    "start": "node ./bin/www",
    "postinstall": "grunt"
  },
  "dependencies": {
    "body-parser": "^1.15.2",
    "cookie-parser": "^1.4.3",
    "errorhandler": "^1.4.3",
    "express": "^4.14.0",
    "method-override": "^2.3.6",
    "morgan": "^1.7.0",
    "pug": "^2.0.0-beta6"
  },
  "devDependencies": {
    "@types/body-parser": "0.0.33",
    "@types/cookie-parser": "^1.3.30",
    "@types/errorhandler": "0.0.30",
    "@types/method-override": "0.0.29",
    "@types/morgan": "^1.7.32",
    "grunt": "^1.0.1",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-ts": "^6.0.0-beta.3",
    "nodemon": "^1.11.0",
    "typescript": "^2.0.8"
  }
}

WebPack

Para rodar o Webpack é preciso tomar cuidado com um parâmetro dentro do seu package.json, segue um exemplo de package.json configurado da forma correta

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --inline --hot --port 3000",
    "build": "webpack -p --port 3000"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.9.0",
    "node-sass": "^4.1.0",
    "sass-loader": "^4.1.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.1.0-beta.28",
    "webpack-dev-server": "^2.2.0-rc.0"
  },
  "dependencies": {
    "d3": "^4.4.0",
    "lodash": "^4.17.2"
  }
}

A configuração que tomar cuidado é a “start”: “webpack-dev-server --inline --hot --port 3000” , essa configuração é feita para que o Webpack rode e fique rodando na porta 3000

2