另一个使用 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。
来源:Js中文网 – 前端进阶资源教程
链接:https://www.javascriptc.com/docs/babel-manual/babel-register