What is @babel/register?
The @babel/register npm package is a Babel hook that automatically compiles files on the fly when they are required. It is primarily used during development to compile JavaScript files using Babel as soon as they are imported, which allows developers to write modern JavaScript without worrying about compatibility with the current Node.js environment.
What are @babel/register's main functionalities?
On-the-fly ES6/ESNext compilation
Automatically compiles ES6/ESNext files when they are required. This allows you to use new JavaScript features without pre-compiling your code.
require('@babel/register');
require('./my-es6-script.js');
Custom Babel configurations
Allows you to specify custom Babel configurations, such as presets and plugins, to be applied when compiling your JavaScript files.
require('@babel/register')({
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime']
});
require('./my-custom-babel-config-script.js');
Ignore specific files or directories
Provides an option to ignore specific files or directories during the compilation process, which can improve performance by skipping unnecessary files.
require('@babel/register')({
ignore: [/node_modules/]
});
require('./my-script.js');
Source map support
Supports inline source maps, which can be useful for debugging by allowing you to trace back to the original source code.
require('@babel/register')({
sourceMaps: 'inline'
});
require('./my-script-with-source-maps.js');
Other packages similar to @babel/register
ts-node
Similar to @babel/register, ts-node provides on-the-fly compilation for TypeScript files. It is specifically designed for TypeScript and includes type checking, whereas @babel/register is more general-purpose for JavaScript with Babel transformations.
esm
The esm package is a lightweight runtime that allows you to use ES modules in Node.js. It offers similar on-the-fly compilation for ES module syntax but does not include the wide range of JavaScript feature transformations that Babel provides.
pirates
Pirates is a more generic module that allows you to add hooks for transforming files on the fly. While it doesn't provide the transformations itself, it can be used to implement similar functionality to @babel/register by plugging in your own transform function or using it with Babel.
require-extension-hooks
This package is designed to hook into the require function and transform files on-the-fly. It is similar to @babel/register but is more flexible as it allows you to hook into any file extension and apply custom transformations.
@babel/register
The require hook will bind itself to node's require and automatically compile files on the fly.
One of the ways you can use Babel is through the require hook. The require hook
will bind itself to node's require
and automatically compile files on the
fly. This is equivalent to CoffeeScript's
coffee-script/register.
Install
npm install @babel/core @babel/register --save-dev
Usage
require("@babel/register");
All subsequent files required by node with the extensions .es6
, .es
, .jsx
,
.mjs
, and .js
will be transformed by Babel.
Polyfill not included
You must include the polyfill separately
when using features that require it, like generators.
Ignores node_modules
by default
NOTE: By default all requires to node_modules
will be ignored. You can
override this by passing an ignore regex via:
require("@babel/register")({
ignore: []
});
Specifying options
require("@babel/register")({
ignore: [/regex/],
ignore: [function(filename) {
if (filename === "/path/to/es6-file.js") {
return false;
} else {
return true;
}
}],
only: /my_es6_folder/,
extensions: [".es6", ".es", ".jsx", ".js", ".mjs"],
cache: true
});
You can pass in all other options as well,
including plugins
and presets
. But note that the closest .babelrc
to each file still applies, and takes precedence over any options you pass in here.
Environment variables
By default @babel/node
cli and @babel/register
will save to a json cache in your
temporary directory.
This will heavily improve with the startup and compilation of your files. There
are however scenarios where you want to change this behaviour and there are
environment variables exposed to allow you to do this.
BABEL_CACHE_PATH
Specify a different cache location.
BABEL_CACHE_PATH=/foo/my-cache.json babel-node script.js
BABEL_DISABLE_CACHE
Disable the cache.
BABEL_DISABLE_CACHE=1 babel-node script.js