concept Babel in category javascript

appears as: Babel
The Joy of JavaScript MEAP V08

This is an excerpt from Manning's book The Joy of JavaScript MEAP V08.

In this book, we’ll be using Babel. Babel is very close to being a compiler except it doesn’t change the target language—it’s a JS to JS compiler, if you will. You can also use a Node.js runtime that interprets modern JS directly (on-the-fly compilation). It might help to think of Babel as like a virtual machine that abstracts the underlying runtime. Configure it to support any stage proposals you need, and it will take care of converting your code to something that’s optimal and runs natively. Refer to Appendix A for Babel information and setup.

Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyond

This is an excerpt from Manning's book Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyond.

There are projects such as Babel (see lesson 2) that allow you to use future JavaScript features today. If you’re going to use a tool like this, it’s probably a good idea to pick an appropriate stage at the beginning of your project. If you only want features that are guaranteed to be in the next release, stage 4 would be appropriate. Choosing stage 3 is also considered safe because most likely any features included in stage 3 will end up staying, and with few changes. Choose a stage lower than that and you run the risk of having features changed or even revoked in the future. You may find a particular feature helpful enough to make that risk worth taking.

2.2. Setting up Babel 6

Babel is available as an NPM (https://www.npmjs.com/) package and comes bundled with Node.js (https://nodejs.org/en/). You can download an installer for Node.js from their website. This book assumes you have Node.js version 4 or later installed and NPM version 3 or later. NPM comes bundled with Node.js and thus doesn’t require being installed separately.

In order to use Babel, you’ll set up a node.js package so you can install your required dependencies. With Node.js and NPM installed, open a command line program (Terminal .app in OSX or cmd.exe in Windows) and execute the following shell commands to initialize a new project (make sure you replace the placeholder project_name with the name of your project):[1]

You should now see a new file called package.json in your project indicating that this is a Node.js project. Now that you have a project initialized, you can set up Babel. Execute the following shell command to install Babel’s command line interface:[2]

2The current version of Babel at the time of this writing is version 6.5.2. The instructions in this book are for Babel version 6.x which is a major change from version 5.x. You can constrain to some version of Babel 6 using the version range >=6.0.0 <7.0.0 e.g. npm install babel@">=6.0.0 <7.0.0"; see https://docs.npmjs.com/cli/install.

$ npm install babel-cli --save-dev

Beginning in version 6, Babel doesn’t do any transforming by default, and you must install plugins or presets for any transformations you want to apply. To use a plugin or preset, you must both install it in your project and specify its use in Babel’s configuration.

Babel uses a special file called .babelrc for its configuration. You must put this file in the project’s root and the contents of the file must be valid JSON. To specify that you want Babel to transpile all ES2015 features, you can use the ES2015 preset. Edit the .babelrc file so its contents are

{
  "presets": ["es2015"]
}

Now that you’ve told Babel to use the ES2015 preset, you must also install it:

2.3.2. Set up Babel as NPM script

You may not want to repeatedly tell Babel what folder to transpile from and to (like you did in listing 2.1). You can make your life easier by setting up an NPM script to do that for you. If you’re unfamiliar with how NPM scripts work, it’s really simple. In your NPM configuration file named package.json, there’s a special scripts section that allows you to specify shell commands that can be executed by their name. See https://docs.npmjs.com/misc/scripts for further information about NPM scripts.

sitemap

Unable to load book!

The book could not be loaded.

(try again in a couple of minutes)

manning.com homepage
test yourself with a liveTest