Javascript 类型错误：超级表达式必须为 null 或函数，不能使用 Babeljs 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35777991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError: Super expression must be null or a function, not undefined with Babeljs
提问by Aethyn
I'm currently trying to make multiple-files inheritance in ES6, with node.JS and Babel (I'm using Babel to convert the code from ES6 to ES5 'cause Node don't implement ES6 right now). I'm using import/export to "link" the differents files.
我目前正在尝试在 ES6 中使用 node.JS 和 Babel 进行多文件继承（我正在使用 Babel 将代码从 ES6 转换为 ES5，因为 Node 现在没有实现 ES6）。我正在使用导入/导出来“链接”不同的文件。
Actually I have : Parent Class (File 1)
其实我有： 父类（文件1）
export class Point
{
constructor(x, y)
{
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
And : Child Class (File 2)
和： 子类（文件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;
}
}
And the main Main (File 3)
和主要的 Main（文件 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());
I'm doin' that to test the toString() methods calls, from Parent and from Child.
So then I use Babel to convert the code from ES6 to ES5 and I run each parts separately to test if it's ok or not.
- Point (the Parent) is good, and execute without error.
- ColorPoint (the Child) don't run completely and throw :
我这样做是为了测试来自 Parent 和来自 Child 的 toString() 方法调用。
然后我使用 Babel 将代码从 ES6 转换为 ES5，并分别运行每个部分以测试它是否正常。
- 点（父级）很好，并且没有错误地执行。
- ColorPoint（孩子）没有完全运行并抛出：
TypeError: Super expression must either be null or a function, not undefined
类型错误：超级表达式必须为空或函数，而不是未定义
The first line of the StackTrace is :
StackTrace 的第一行是：
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.proto= superClass; } (It comes from the ES5 converted code (Babelified), and I can post it entirely if it's needed).
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, writable: true, configure: true } }); if (superClass) Object.setPrototypeOf ？Object.setPrototypeOf(subClass, superClass) ：子类。原型= 超类；（它来自 ES5 转换代码（Babelified），如果需要我可以完整地发布它）。
It is frustrating cause this code is very simple... But I don't see what is causing the error.
令人沮丧的是，这段代码非常简单……但我不明白是什么导致了错误。
I try differents versions of Babel (5, 5.8, 6) but there is no differences...
我尝试了不同版本的 Babel (5, 5.8, 6) 但没有区别......
What have I done wrong ?
我做错了什么？
PS : I forgot to tell : it WORKS PERFECTLY when I do that in just one file. But it's really important to me to have only one class by file...
PS：我忘了说：当我只在一个文件中执行此操作时，它可以完美运行。但对我来说，一个文件只有一个班级真的很重要......
回答by ssube
Your export doesn't match your import:
您的导出与导入不匹配：
export class Point
// and
import Point from './pointES5'
You're exporting a named symbol but importing the default, so you'll be getting the wrong object as Pointin your second file.
您正在导出命名符号但导入默认值，因此您将获得与Point第二个文件中一样的错误对象。
You can either use:
您可以使用：
export default class Point
in the first class file or
在第一个类文件中或
import {Point} from './pointES5';
in the second file to fetch the right reference. If you're going for the single-class-per-file layout, I'd suggest the former. You'll typically only have a single class being exported, so it makes sense to have that as the default.
在第二个文件中获取正确的参考。如果您要使用单类每个文件布局，我建议使用前者。您通常只会导出一个类，因此将其作为默认值是有意义的。
What you have now is the equivalent of:
你现在拥有的相当于：
// in Point
module.exports = {
Point: Point
};
// in ColorPoint
var Point = require('./pointES5'); // will point to *the whole object*
class SubPoint extends Point
回答by Teebo
It could also be a problem in your webpack config, if you are using webpack as a bundler. Or how you uglify your code. for example how I solved my specific issue with the NPM package react-draft-wysiwygand the wepback plugin uglifyjs-webpack-plugin.
如果您使用 webpack 作为打包器，这也可能是您的 webpack 配置中的问题。或者你如何丑化你的代码。例如，我如何使用 NPM 包react-draft-wysiwyg 和 wepback 插件uglifyjs-webpack-plugin解决我的特定问题。
What worked for me here was to set the inlineoption for the compressoption to false because by default it is truefor the uglifyOptions.
在这里对我有用的是将compress选项的inline选项设置为 false 因为默认情况下它对于uglifyOptions是true。
optimization:{
minimizer: [new UglifyJsPlugin({
uglifyOptions: {
compress: {
inline: 1, // this right here
// keep_fnames: true
},
mangle: {
// keep_fnames: true
}
}
})]
}
