Question

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

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

与webpack进行编译

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

我还尝试使用导入导出，执行

Subclass.js

import Superclass from './Superclass';

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

class Subclass extends Superclass {
}

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

你最初的捅是错误的，因为：

您没有正确导入Superclass
您没有导出Subclass或Superclass

您的第二次尝试距您正确导入Superclass更近但导致导出失败Subclass - 总结一下，这应该会修复您的代码

<强> Subclass.js

import Superclass from './Superclass';

export default class Subclass extends Superclass {
   ...
}

<强> Superclass.js

export default class Superclass {
   ...
}

如何导入类以扩展ES6和Webpack？

1 个答案: