使用Webpack打包js文件的类未定义问题

Question

我正在打包以下文件的内容：

a.js：

class BaseC {
    doIt(){
        console.log(this);
    }
}

class A extends BaseC{
}

b.js:

class B extends BaseC{
}

var b = new B()

b.doIt();

这些被捆绑在最终的 app.bundle.js 中。当运行它时，我收到以下错误信息："Uncaught ReferenceError: BaseC is not defined"。这对我来说非常奇怪，因为我可以看到它在其余类之前首先在 app.bundle.js 中定义如下：。

var BaseC = function () {
    function BaseC() {
        _classCallCheck(this, BaseC);
    }

    _createClass(BaseC, [{
        key: "doIt",
        value: function doIt() {
            console.log(this);
        }
    }]);

    return BaseC;
}();

任何线索吗？

附言：我没有使用require/import系统。我知道这通常是webpack的使用方式，但我正在使用glob模块提供一个包含我想要捆绑的所有js文件的数组，并期望在这个简单的示例中，它应该工作。

- Return-1

---

你是在 a.js 文件中导出 BaseC 类，并在 b.js 中导入它吗？ - Jesús Quintana

感谢回复。Kristaps 说了同样的话，但问题是，即使导出/导入可以工作，它也应该在不进行任何操作的情况下正常工作，因为它已经在 app.bundle.js 文件中定义了 - George Avgoustis 刚刚编辑 - Return-1

这与上下文有关。BaseC 存在于文件 a.js 的上下文中，而不是b.js。为了让 b.js 使用 BaseC，它必须被导入或引用。请按照 kristaps 的下面的答案。 - sanjsanj

可能是 How does webpack handle multiple files importing the same module React 的重复问题。 - sanjsanj

阅读一下这个堆栈问题，模块不会被重复，但是在使用它们的文件上下文中需要它们。 - sanjsanj

Answer 1

尝试从a.js中导出该类： export class BaseC { ... 并将其导入到b.js中： import {BaseC} from './a.js' ...

- kristaps

---

问题在于，尽管导出/导入有效，但它本来应该不需要这样做，因为它已经在app.bundle.js文件中定义了。 - Return-1

我同意。在简单的网站中，肯定有一种不用到处导入东西的方法... - Timar Ivo Batis