What does "register" mean in "babel/register"

Question

In order to do runtime transformations in Babel you need to require and use babel-core/register. I have no idea what register means in this sense, i.e. the actual definition.

The page isn't very helpful.

What does this actually mean?

Answer 1

The purpose of babel is to transpile your js current code to an understandable version of js for the given environment, tool, framework you're using. Those vary as listed here, How to use Babel with your tool of choice. In the node environment, babel does not exist as part of its core APIs, so it needs to be added as an npm package first, (my example is for @babel 7.x ). And because babel is separated to accommodate different tools, we need to add @babel/core for the core functionality along with @babel/preset-env which enables transforms for ES2015+.

npm install @babel/core @babel/preset-env --save-dev

or

npm i -D @babel/core @babel-preset

now as we use babel we want the tell node about the available preset by setting up a .babelrc file in the root directory, more on that found here

{
  "presets": ["@babel/preset-env"]
}

now to get to the register aspect. Because of the nature of ES6 modules as explained here, if we want to run babel without a build step like webpack or rollup, and run files using babel 'on the fly' we need to register babel into node's runtime The require hook will bind itself to node’s require and automatically compile files on at runtime. This is equivalent to CoffeeScript’s coffee-script/register. reference from babel usage docs for babel-register found here. Therefore, along with the previous npm install, we'll also need to add @babel/register:

npm install @babel/register --save-dev

or

npm i -D @babel/register

Now we can use it, either require "@babel/register" in the application files by one of two means, either in a file (generally, in the index.js file that is the entry point in your app and contains requires to other files) or add it in when using the cli.

// in .js file
require("@babel/register");

or

// in command line, don't add it to the .js file but instead use the -r flag for require
npx -r @babel/register index.js

(more on npx can be found here)

As an option to adding the .babelrc, it can be skipped by instead adding a "babel" property within the package.json file as an option, ex.

//package.json in root
...,
"babel": {
  "presets":[
    "@babel/preset-env"
   ]
},
...

While the above was for babel 7, an example in babel 6 can be found from a great teacher's github, Josh Miller, here (view his package.json file) Hope this helps for an understanding of 'register' needs.