Node.js babel different usage transpiling to ES5 and Debugging

There are different usages of babel tool. I put a sample package.json file. Notice that there are scripts block which has different usages.

Creating Babel configuration file

.babelrc

{
  "presets": [
    "env"
  ],
  "plugins": [
    "transform-runtime"
  ],
  "sourceMaps": true,
  "retainLines": true
}

Running with Babel-node

//If you have installed babel-cli package globally, run below code.
babel-node --presets=env --plugins=transform-runtime src

or

//If you have .babelrc config file, run below code without specifying inline arguments.
babel-node src

or

//If you have installed babel-cli package locally, run below code.
./node_modules/.bin/babel-node --presets=env --plugins=transform-runtime src

Running with Babel-register

node --require ./node_modules/babel-register src

or

node --require babel-register src/index.js

Running with Babel

babel ./src -d dist -s && node dist/index.js
{
  "name": "babeltest1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "buildv1:src": "babel ./src -d dist -s",
    "buildv1": "rm -rf dist && npm run buildv1:src",
    "start:buildv1": "npm run buildv1 && node dist/index.js",

    "buildv2:src": "babel ./src --out-dir dist --source-maps",
    "buildv2": "rm -rf dist && npm run buildv2:src",
    "start:buildv2": "npm run buildv2 & node dist/index.js",

    "buildv3:src": "babel --no-babelrc . --out-dir dist --presets=env --plugins=transform-runtime --source-maps --ignore 'node_modules,dist,.babelrc,.compiled,.vscode'",
    "buildv3": "rm -rf dist && npm run buildv3:src && mv dist/src/* dist && rm -rf dist/src",
    "start:buildv3": "npm run buildv3 && node dist/index.js",
    
    "buildv4:src": "$(which babel) --no-babelrc src --out-dir dist --presets=env --plugins=transform-runtime --source-maps",
    "buildv4": "rm -rf dist && npm run buildv4:src",
    "start:buildv4": "npm run buildv4 && node dist/index.js",

    "buildv5:src:watch": "babel src --out-dir dist --source-maps --watch",
    "buildv5:watch": "rm -rf dist && npm run buildv5:src:watch",
    "start:buildv5": "npm run buildv5:watch && node dist/index.js",

    "buildAndRunWithBabelNode": "babel-node --presets=env --plugins=transform-runtime src",

    "buildAndRunWithBabelRegister": "node --require ./node_modules/babel-register src",

    "buildAndRunWithBabelRegisterv2": "node --require babel-register src/index.js",

    "build:lib": "$(which babel) --no-babelrc src --out-dir=dist --presets=env --plugins=transform-runtime --copy-files --source-maps",
    "build": "rm -rf dist && npm run build:lib",
    "watch": "npm run build:lib -- --watch",
    "start": "npm run build && node --inspect dist/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1"
  },
  "dependencies": {}
}

You can reach github project from the following link.

https://github.com/kenanhancer/BabelDifferentUsageDemo1

Leave a Reply

Your email address will not be published. Required fields are marked *