@babel/register


另一个使用 Babel 的方法是通过 require 钩子(hook)。require 钩子 将自身绑定到 node 的 require 模块上,并在运行时进行即时编译。 这和 CoffeeScript 的 coffee-script/register 类似。

安装

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

用法

 js
require("@babel/register");

node 后续运行时所需要 require 进来的扩展名为 .es6.es.jsx.mjs.js 的文件将由 Babel 自动转换。

Js中文网 – 前端进阶资源教程 www.javascriptC.com ,Babel中文文档
一个致力于帮助开发者用代码改变世界为使命的平台

Polyfill 不会被引入进来

当所需的功能需要使用 polyfill 来实现时,你必须将它们逐个引入, 例如 生成器(generators)。

默认忽略 node_modules

注意: 默认情况下,所有对 node_modules 目录下的文件的 require 请求都将被忽略。你可以 通过以下方式传递一个用于匹配被忽略文件的正则表达式来修改默认行为:

require("@babel/register")({
  // This will override <code>node_modules</code> ignoring - you can alternatively pass
  // an array of strings to be explicitly matched or a regex / glob
  ignore: [],
});

```javascript

### [][6]指定参数
</code></pre>
<p>javascript
require("@babel/register")({
// Array of ignore conditions, either a regex or a function. (Optional)
// File paths that match any condition are not compiled.
ignore: [
// When a file path matches this regex then it is <strong>not</strong> compiled
/regex/,</p>
<pre><code>// The file's path is also passed to any ignore functions. It will
// **not** be compiled if <code>true</code> is returned.
function(filepath) {
  return filepath !== "/path/to/es6-file.js";
},</code></pre>
<p>],</p>
<p>// Array of accept conditions, either a regex or a function. (Optional)
// File paths that match all conditions are compiled.
only: [
// File paths that <strong>don't</strong> match this regex are not compiled
/my_es6_folder/,</p>
<pre><code>// File paths that **do not** return true are not compiled
function(filepath) {
  return filepath === "/path/to/es6-file.js";
}</code></pre>
<p>],</p>
<p>// Setting this will remove the currently hooked extensions of <code>.es6</code>, <code>.es</code>, <code>.jsx</code>, <code>.mjs</code>
// and .js so you'll have to add them back if you want them to be used again.
extensions: [".es6", ".es", ".jsx", ".js", ".mjs"],</p>
<p>// Setting this to false will disable the cache.
cache: true,
});</p>
<pre><code>你还可以传递所有其他 [参数][7] ,包括 <code>plugins</code> 和 <code>presets</code>。 注意,[配置文件][8] 也将被加载,并且 编程方式的配置也将被合并进来,放在这些配置项的顶部。

### [][9]环境变量

默认情况下,<code>@babel/node</code> 命令行工具 和 <code>@babel/register</code> 会将缓存以 json 文件的形式放到 临时目录下。

随着文件的启动和编译,这将大大的提升效率。 但是,在某些情况下你可能需要修改这种行为方式,你可以通过 修改某些环境变量来满足你的需求。

#### [][10]BABEL\_CACHE\_PATH

指定另一个用于缓存的位置。

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

Js中文网 – 前端进阶资源教程 www.javascriptC.com ,Babel中文文档
一个致力于帮助开发者用代码改变世界为使命的平台

BABEL_DISABLE_CACHE

关闭缓存。

 sh
BABEL_DISABLE_CACHE=1 babel-node script.js

即时编译插件和 preset

code>@babel/register</code 使用 Node 的 require() 钩子系统(hook system) 在加载文件时即时编译文件。虽然这在总体上很有帮助,但这意味着 require() 钩子中的代码会导致 更多require 调用,从而导致依赖循环的情况出现。 以 Babel 为例, 这可能意味着在 Babel 试图编译 用户的文件的过程中,Babel 最终可能会在 加载自己时 尝试编译自己。

为了避免这个问题,这个模块明确的禁止重新进入编译, 例如,Babel 自己的编译逻辑明确禁止触发进一步编译任何其他正在运行的文件。 这样做的缺点是如果你想 定义一个插件或 preset,并且这个插件或 preset 本身是实时编译的,这个过程将会 很复杂。

上述问题的关键在于,你自己的代码首先需要加载插件或 preset。 假定插件或 preset 预先加载了其自身的所有依赖项,你需要 做的是:


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

require("./my-plugin");

因为是由你的代码触发的加载,而不是 code>@babel/register</code 自身的业务逻辑,这样才能成功编译任何同步加载的插件或 preset。

← transform-runtimeenv →

来源:Js中文网 – 前端进阶资源教程
链接:https://www.javascriptc.com/docs/babel-manual/babel-register

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 画漫画的程序员 GitHub仓库,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界