Using Babel.js

Babel.js is similar to TypeScript but has much more transpiling power. It can transpile almost all modern JavaScript features into browser-compatible version.

Babel.js is mostly used together with Webpack. For server-side transpiling, TypeScript does the trick well enough.

Setup

Install the required packages.

$ npm i --save-dev babel-cli babel-preset-env

Create a new file called ./.babelrc and add the configuration below.

{
  "presets": [
    ["env", { "targets": { "node": "current" } }]
  ]
}

Set variables inside the ./packages.json file as follows.

{
  "main": "./dist/index.js",
  "scripts": {
    "clean": "rm -Rf ./dist",
    "build": "npm run clean; babel ./src --out-dir ./dist --copy-files",
    "prepublish": "npm run build",
    "start": "node ./dist"
  },
}

Now when we run the npm start command, the app directory will first be transpiled into ES5 Javascript code and then saved into ./dist directory. Note that the ./dist directory should be committed with the rest of the code.

If you use nodemon --exec command, make sure you exclude the dist directory from watch list in the nodemon.json file.

{
  ...
  "ignore": ["dist/*"]
}

results matching ""

    No results matching ""