问题描述
在使用 Babel 编译时，有时会出现以下报错信息：
TypeError: Cannot read property 'bindings' of null
这个错误信息比较简洁，但是对于初学者来说可能不太容易理解。接下来我们将详细解释这个错误的原因，并提供解决方法。
错误原因
在 Babel 编译时，会对代码进行解析和转换。在解析过程中，Babel 会将代码转换成 AST（抽象语法树）的形式，然后再对 AST 进行转换。
当 Babel 在解析代码时，有时会遇到无法解析的代码，例如一些语法错误或者未定义的变量等。这时，Babel 会报错并停止编译。
在报错信息中，TypeError: Cannot read property 'bindings' of null 表示 Babel 在解析代码时，遇到了一个无法解析的节点，这个节点的 bindings 属性为 null，即没有找到相应的绑定关系。
解决方法
要解决这个问题，我们需要找到导致错误的代码，并进行修复。以下是几个常见的导致这个错误的原因和解决方法：
1. 未定义的变量
如果代码中使用了未定义的变量，Babel 就会报错。例如：
const a = b + 1;
在这个例子中，变量 b 没有被定义，因此 Babel 会报错。要解决这个问题，我们需要先定义变量 b，例如：
const b = 2; const a = b + 1;
2. 语法错误
如果代码中存在语法错误，Babel 也会报错。例如：
const a = 1 const b = 2
在这个例子中，第一行缺少了分号，导致语法错误。要解决这个问题，我们需要加上分号，例如：
const a = 1; const b = 2;
3. 插件问题
有时候，Babel 的插件可能会导致这个错误。例如，如果使用了 @babel/plugin-transform-runtime 插件，但是没有安装相应的依赖包，就会报错。要解决这个问题，我们需要安装相应的依赖包，例如：
npm install --save-dev @babel/runtime
4. 版本问题
有时候，Babel 的版本问题也可能导致这个错误。例如，如果使用了 Babel 7.x 版本，但是插件使用的是 Babel 6.x 版本的代码，就会报错。要解决这个问题，我们需要保证 Babel 和插件的版本一致。
示例代码
以下是一个示例代码，演示了如何解决这个错误：
const a = b + 1; console.log(a); // 解决方法： const b = 2; const a = b + 1; console.log(a);
在这个例子中，原始代码中使用了未定义的变量 b，导致 Babel 报错。我们可以先定义变量 b，然后再使用它，就可以解决这个问题。
总结
在使用 Babel 编译时，如果出现了 TypeError: Cannot read property 'bindings' of null 这个错误，我们需要找到导致错误的代码，并进行修复。常见的错误原因包括未定义的变量、语法错误、插件问题和版本问题等。要解决这个问题，我们需要仔细检查代码，找到错误的原因，并进行修复。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65057d9b95b1f8cacd1f2b2b