前端开发中，Babel是一个非常重要的工具，它可以将新一代的 JavaScript 代码转换为当前浏览器支持的 JavaScript 代码。然而，有时在使用Babel编译代码时，我们会遇到一些问题，比如出现TypeError: Cannot read property 'indexOf' of undefined的错误。这个错误的意思是不能读取 undefined 的indexOf属性，通常会出现在使用ES6的类时。那么，这个错误该如何解决呢？下面我们将介绍解决方法。
问题原因
在 ES6 中，一个类可以继承另一个类，这是非常方便的。然而，在Babel编译时，它默认使用了一种叫做es2015的preset，它实现了一些前期的ECMAScript规范。这个preset使用了一个叫做_transform-class-inherits_的插件。目的是为了给子类添加一个_SPREAD_函数，来实现非常优雅的继承。然而，在使用这个插件时，当我们继承父类时，如果我们的父类中有些需要传入参数的方法，这些方法会在子类中失效，由此导致了对undefined的indexOf属性的读取，从而出现了TypeError: Cannot read property 'indexOf' of undefined。
比如下面的示例代码：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
--------- -
------------------------- ----- -- --- -----------
-
-
----- --- ------- ------ -
----------------- ------ -
------------
---------- - ------
-
------ -
---------------- ------------- --- ------------ -- -----------
-
--------- -
----------------
------------------------- ---- ----- -- --- -----------
-
-
----- ----- - --- ------------ ------- ------------
-------------
------------------当我们通过Babel编译以上代码时，就会出现TypeError: Cannot read property 'indexOf' of undefined的错误。
解决方法
为了解决这个问题，我们需要安装一个叫做babel-plugin-transform-es2015-classes的插件，这个插件实现了更加完整的ES6类转换，它会替换掉Babel的默认类转换方式。
- 安装
我们可以通过npm安装babel-plugin-transform-es2015-classes：
npm install babel-plugin-transform-es2015-classes --save-dev
- 配置
在.babelrc文件中，我们需要添加这个插件，并将其替换Babel默认的es2015 preset。我们可以这样配置：
{
"preset": [],
"plugins": ["transform-es2015-classes"]
}- 编译
现在，我们重新编译我们的类文件，你将会发现代码正常工作了，也不会出现TypeError: Cannot read property 'indexOf' of undefined的错误了。
总结
在使用Babel的es2015 preset时，我们需要注意到这个preset中含有一个_transform-class-inherits_的插件，它会导致我们在继承父类的方法时，传递参数会失败，从而引起对undefined的indexOf属性的读取，我们可以通过安装babel-plugin-transform-es2015-classes插件，来更完整地实现ES6类转换，从而避免这个错误的出现。
以上介绍了如何解决Babel编译后出现TypeError: Cannot read property 'indexOf' of undefined的错误，希望能够帮助到前端开发者们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec40aaf6b2d6eab3684572