Babel register

In this section, let’s talk about @babel/register. One of the ways to use Babel is through the require hook, which binds itself to the require module of node and automatically compiles the file at runtime. This is similar to CoffeeScript's coffee-script/register.

Install

@babel/register has only one function, which is to rewrite node's require method.

The installation command is as follows:

npm install @babel/core @babel/register --save-dev

After installation, it can be referenced by require, as shown below:

require("@babel/register");

@babel/register rewrites the require method of node at the bottom. After the @babel/register module is introduced into the code, all modules that are introduced through require and have .es6, .es, .jsx, .mjs, and .js suffixes Will be translated by Babel.

Ignore node_modules by default

By default, all require requests for files in the node_modules directory will be ignored. We can modify the default behavior by passing a regular expression for matching ignored files in the following way:

require("@babel/register")({
  ignore: [],
});

Specify parameters

require("@babel/register")({
  ignore: [
    /regex/,
    function(filepath) {
      return filepath !== "/path/to/es6-file.js";
    },
  ],
  only: [
    /my_es6_folder/,
    function(filepath) {
      return filepath === "/path/to/es6-file.js";
    }
  ],
  extensions: [".es6", ".es", ".jsx", ".js", ".mjs"],
  cache: true,
});

Or you can pass other parameters, such as plugins and presets. It should be noted that the configuration file will also be loaded, and the programmatic configuration will also be merged and placed on top of these configuration items.

Environment variable

By default, the @babel/node command line tool and @babel/register will put the cache in the temporary directory in the form of a json file.

As the files are started and compiled, this will greatly improve efficiency. But in some cases, we may need to modify this behavior, and we can modify certain environment variables to meet the needs.

BABEL_CACHE_PATH

Specify another location for caching:

BABEL_CACHE_PATH=/foo/my-cache.json babel-node script.js

BABEL_DISABLE_CACHE

Turn off the cache:

BABEL_DISABLE_CACHE=1 babel-node script.js

Just-in-time compilation plugins and presets

@babel/register uses Node's require() hook system to compile files on the fly when they are loaded. Although this is helpful in general, it means that the code in the require() hook will cause more require calls, which can lead to a dependency loop.

Taking Babel as an example, this may mean that while Babel is trying to compile the user's file, Babel may eventually try to compile itself while loading itself.

To avoid this problem, this module explicitly prohibits re-entering compilation. For example, Babel's own compilation logic explicitly prohibits further compilation of any other running files.

The disadvantage of this is that if we want to define a plug-in or preset, and the plug-in or preset itself is compiled in real time, the process will be very complicated.

The key to the above problem is that our own code first needs to load the plug-in or preset. Assuming that the plug-in or preset has pre-loaded all its own dependencies, it can be done as follows:

require("@babel/register")({
  // ...
});

require("./my-plugin");

Because the loading is triggered by our own code, instead of @babel/register's own business logic, any synchronously loaded plugins or presets can be successfully compiled.

Link: https://www.9xkd.com/