ES6 to ES5 transpilation with Babel.js and Node.js

Transpiling ECMAScript2015 aka ES6 to ES5 with Babel from a JS entry point file, then automatically export it into a distribution folder ready for production with NPM scripts

The technique called transpiling (transformation + compiling) is based on the usage of special tools to transform ES6 code into equivalent or close matches that works in ES5 environments.

This ready to go configuration is aimed to give the JavaScript developer the capability to quickly set up a Node.js environment and deliver ES5 from ES6 without wasting time in the maze of Babel configuration options and its plugins... It gives you the minimum settings to start a new project or evaluate any new ideas and it includes one HTML code base to fulfill this objective as well.

Default Configuration

This configuration comes with :

• package.json ready to go file (see "installation" section)
• @babel/cli to compile ES6 to ES5
• minification with babel-preset-minify - Babel preset used via command line
• soure map used as @babel/cli option
• index.html snippet file that imports .dist/app.js or .dist/app.min.js
• .babelrc file to host Babel configuration :
  • @babel/preset-env option to compile for each environment that supports ES5
  • comments as boolean option to preserve JS comments in the output code from Babel
• NPM scripts to :
  • prebuild => create the projects structure ./dist, index.html, index.js, .babelrc (all files/folder are empty, see further)
  • clean:dist => clean/remove the ./dist folder and its content before each Babel compilation
  • build:dev => compile index.js to .dist/app.js (no minification, no source maps)
  • build:dev:watch => watch and compile index.js to .dist/app.js (no minification, no source maps)
  • build => compile index.js to .dist/app.js with inline source maps (no minification)
  • build:minify => compile index.js to .dist/app.min.js with inline source maps + minification

Installation

Clone or download this repository locally then run:

$ npm install

It will install all the dependencies then you are ready to go...

Usage

Now you can write your ES6 JavaScript code into the provided index.js file and you have multiple NPM scripts to compile your code to ES5 depending of the evolution state of your project - development to production:

NPM script exemple:

$ npm run build:dev

• this script will compile your code as raw ES5 and then export it into the ./dist folder as ./dist/app.js without providing minification neither source maps (as discribed earlyer in the "Default Configuration" section of this page). All your JS comments are preserved (see further to remove JS comments for production).

NPM scripts:

• reading the package.json "scripts" section can help you to understand the purpose of each script:

package.json

  //...
  "scripts": {
    "prebuild": "touch index.html && touch index.js && touch mkdir dist",
    "clean:dist": "rm -rf dist && mkdir dist",
    "build:dev": "npm run clean:dist && babel index.js --out-file dist/app.js",
    "build:dev:watch": "npm run clean:dist && babel index.js --out-file dist/app.js --watch",
    "build": "npm run clean:dist && babel index.js --out-file dist/app.js --source-maps inline",
    "build:minify": "npm run clean:dist && babel index.js --out-file dist/app.min.js --source-maps inline --presets minify"
  }
  //...

NPM scripts	babel output	watch task	source maps*	minification	JS comments**
build:dev	dist/app.js	false	false	false	true
build:dev:watch	dist/app.js	true	false	false	true
build	dist/app.js	false	true	false	true
build:minify	dist/app.min.js	false	true	true	true

Caution:

• running the prebuild script will overwrite the index.html file provided by default with the minimum required and necessary HTML tags to import your compiled JS file and run it in the broswer.
• running clean:dist will remove the ./dist folder from your root directory.

Production import:

• the build:minify script brings minification for production, it compiles and export your JS file as dist/app.min.js. In order to use it, you'll need to import it in the index.html like so:

index.html

  //...
  <body>
-    <script src="./dist/app.js"></script>
+    <script src="./dist/app.min.js"></script>
  </body>
  //...

* source maps:

• note that the generated Source Map is included in the compiled file. If you need a separated file please refer to the Babel Source Map Documentation

** JS comments for production:

• by default, any JS comments in the output code from Babel are preserved. If you want to remove them for production, you'll need to change the boolean value of the "comments" property into the .babelrc file like so:

.babelrc

  {
    //...
-   "comments": true,
+   "comments": false,
    "presets": ["@babel/preset-env"]
    //...
  }

Built With

• @babel/cli
• babel-preset-minify
• Node.js
• NPM
• Visual Studio Code

Versioning

We use SemVer for versioning.

Author

• Thomas G. aka Drozerah - Github

Acknowledgments

• Babel & preset-env
• Thanks to @lbonanomi for the README.md revisions

License

ISC