如何使用ES6和Webpack导入一个类来扩展？

Question

我是新手，正在尝试在另一个文件中导入或引用一个类以进行扩展，但始终会发现该类未定义。以下是文件设置。

app.js

require('./stuff.js');

stuff.js

require('./Subclass.js');

Subclass.js

require('./Superclass.js');

class Subclass extends Superclass {
}

Superclass.js

class Superclass {
}

通过webpack app.js bundle.js编译，导致在浏览器中包含bundle.js时出现Superclass未定义的情况。

我还尝试使用带有exports的import，做如下操作：

Subclass.js

import Superclass from './Superclass';

// I have also tried
// import {Superclass} from './Superclass';

class Subclass extends Superclass {
}

Superclass.js

export default class Superclass {
}

但这会导致在尝试扩展时未定义Superclass，从而引发错误超级表达式必须是null或函数，而不是对象

这是我的webpack.config.js

var path = require('path');
var webpack = require('webpack');
module.exports = {
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    },
    stats: {
        colors: true
    },
    devtool: 'source-map'
};

- Elle H

Answer 1

你最初的尝试是错误的，因为：

1. 你没有正确导入 Superclass
2. 你没有导出 Subclass 或 Superclass

你的第二次尝试更接近了，因为你已经正确地导入了 Superclass，但是你再次没有导出 Subclass - 综上所述，这应该可以修复你的代码

Subclass.js

import Superclass from './Superclass';

export default class Subclass extends Superclass {
   ...
}

Superclass.js

export default class Superclass {
   ...
}

- James

---

谢谢您的澄清，但是在子类中添加导出到超类中并不会改变超类未定义的结果。 - Elle H

@Zurahn，你是否完全按照上面的代码来使用？如果是的话，你看到了什么错误？因为这应该可以正常工作... - James

看起来我正在编辑一个已经移动到不同位置的文件，所以我的更改没有得到反映。 扔桌子 谢谢！ - Elle H