如何导入类以使用 ES6 和 Webpack 进行扩展？

Question

我是 webpack 的新手，我试图要求或导入一个类以在另一个文件中扩展，并不断以未定义的类结束。这是文件设置。

应用程序.js

require('./stuff.js');

东西.js

require('./Subclass.js');

子类.js

require('./Superclass.js');

class Subclass extends Superclass {
}

超类.js

class Superclass {
}

并通过 webpack 编译 webpack app.js bundle.js

有了这个，我最终Superclass is not defined在浏览器中包含 bundle.js 时。

我也试过使用 import 和 export，做

子类.js

import Superclass from './Superclass';

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

class Subclass extends Superclass {
}

超类.js

export default class Superclass {
}

但这会导致尝试扩展时未定义超类，从而导致错误 Super expression must either be null or a function, not object

这是我的 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'
};

Answer 1

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

1. 您没有Superclass正确导入
2. 您不出口Subclass或Superclass

您的第二次尝试更接近于Superclass正确导入但再次失败导出Subclass- 总而言之，这应该修复您的代码

子类.js

import Superclass from './Superclass';

export default class Subclass extends Superclass {
   ...
}

超类.js

export default class Superclass {
   ...
}