TypeError:超级表达式必须是 null 或函数，而不是使用 Babeljs 未定义

TypeError: Super expression must be null or a function, not undefined with Babeljs

本文关键字：未定义 Babeljs 函数 null 表达式 TypeError      更新时间：2023-09-26

我目前正在尝试在 ES6 中使用 node.JS 和 Babel 进行多文件继承（我正在使用 Babel 将代码从 ES6 转换为 ES5，因为 Node 现在没有实现 ES6）。我正在使用导入/导出来"链接"不同的文件。

其实我有：父类（文件 1）

export class Point
{
    constructor(x, y)
    {
        this.x = x;
        this.y = y;
    }
    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}

和：子类（文件 2）

import Point from './pointES5'
export class ColorPoint extends Point
{
    constructor(x, y, color)
    {
        super(x, y);
        this.color = color;
    }
    toString() {
        return super.toString() + ' in ' + this.color;
    }
}

而主要的主（文件 3）

import Point from './pointES5'
import ColorPoint from './colorpointES5'
var m_point = new Point();
var m_colorpoint = new ColorPoint();
console.log(m_point.toString());
console.log(m_colorpoint.toString());

我这样做是为了测试来自父级和子级的 toString（） 方法调用。
然后我使用 Babel 将代码从 ES6 转换为 ES5，并分别运行每个部分以测试它是否正常。
- 点（父级）良好，执行时没有错误。
- ColorPoint（孩子）不要完全运行并扔：

类型错误：超级表达式必须为 null 或函数，而不是未定义

堆栈跟踪的第一行是：

function _inherits（subClass， superClass） { if （typeof superClass ！== 'function' && superClass

！== null） { throw new TypeError（'Super 表达式必须是 null 或函数，而不是 ' + typeof superClass）; } subClass.prototype = Object.create（superClass && superClass.prototype， { constructor： { value： subClass， enumerable： false， writeitable： true， configurable： true } }）; if （superClass） Object.setPrototypeOf ？Object.setPrototypeOf（subClass， superClass） ： subClass.proto = superClass;} （它来自 ES5 转换后的代码（Babelified），如果需要，我可以完全发布它）。

这很令人沮丧，因为这段代码非常简单......但我看不出是什么导致了错误。

我尝试了不同版本的 Babel （5， 5.8， 6），但没有区别......

我做错了什么？

PS ：我忘了告诉：当我在一个文件中执行此操作时，它可以完美运行。但对我来说，只有一个文件类真的很重要......

您的导出与导入不匹配：

export class Point
// and
import Point from './pointES5'

您正在导出命名符号，但导入默认值，因此您将在第二个文件中得到错误的对象Point。

您可以使用：

export default class Point

在第一类文件中或

import {Point} from './pointES5';

在第二个文件中获取正确的引用。如果您要采用每个文件单类的布局，我建议使用前者。通常只会导出一个类，因此将其作为默认值是有意义的。

您现在拥有的相当于：

// in Point
module.exports = {
  Point: Point
};
// in ColorPoint
var Point = require('./pointES5'); // will point to *the whole object*
class SubPoint extends Point

如果您使用 webpack 作为捆绑器，这也可能是您的 webpack 配置中的问题。或者你如何丑化你的代码。例如，我如何使用 NPM 包 react-draft-wysiwyg 和 wepback 插件 uglifyjs-webpack-plugin 解决我的特定问题。

这里对我有用的是将压缩选项的内联选项设置为 false，因为默认情况下对于 uglifyOptions 是真的。

optimization:{
  minimizer: [new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      inline: 1, // this right here
      // keep_fnames: true
    },
    mangle: {
      // keep_fnames: true
    }
  }
})]
}
相关文章：