关于 javascript 模块和 webpack 的混淆：请求的模块...不提供名为“default”的导出

问题描述 投票：0回答：1

我正在尝试在我们的 javascript 项目中设置 webpack，我们想要编写新的 javascript es6 类，通过 webpack 捆绑它们，然后重用这些包。我设置了一个简单的示例，其中定义了一个 TestClass，它由 webpack 拾取并捆绑，然后我用它将其导入到第二个 javascript 文件中。

TestClass.js
：

class TestClass { 

    constructor() {
      console.log("constructor called");
    }

}

export default TestClass;


init.js
：

import TestClass from "./TestClass.js";


webpack.config.js
：

const path = require('path');

module.exports = {
    mode: 'development',
    watch: true,
    entry: './init.js',
    output: {
    filename: 'main.js',
    path: path.resolve(__dirname, '../WebContent/scripts/dist')
  }
};
生成的

片段

main.js
：

/***/ "./TestClass.js":
/*!**********************!*\
  !*** ./TestClass.js ***!
  \**********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nclass TestClass {\n  constructor() {\n    console.log(\"constructor called\");\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TestClass);\n\n//# sourceURL=webpack://test/./TestClass.js?");


test.js
（我想使用 TestClass 的地方）：

import TestClass from './scripts/dist/main.js';

const test = new TestClass();


test.html
：

<!DOCTYPE html>
<html>
<head>
    <script type="module" src="test.js"></script>
</head>
<body>
</body>
</html>

webpack 进程似乎工作正常，但在我的 web 应用程序中执行 test.js 时出现错误

未捕获的语法错误语法错误：请求的模块'./scripts/dist/main.js'不提供名为'default'的导出

但是，当我直接从 TestClass.js 导入 TestClass 时，它会按预期工作，因此类本身不会有问题。搜索教程或询问聊天 gpt 并没有给我带来任何帮助。为什么这不起作用？

javascript webpack ecmascript-6
1个回答
0
投票

好的，我通过以下方法解决了我的问题：

webpack.config.js
：

const path = require('path')

module.exports = {
  mode: 'development',
  watch: true,
    output: {
    filename: 'main.js',
    path: path.resolve(__dirname, '../WebContent/scripts/dist'),
    library: {
      name: "main",
      type: "umd"
    }
    },
    devtool: false
};


index.js
（自动作为webpack的入口）：

import TestClass from "./TestClass.js";
const api = {};

api.TestClass = TestClass;

export { api };

然后我可以在我的 es5 环境中使用这样的 api（导入包 

main
）：

new main.api.TestClass()

不是最理想的解决方案，但它可以完成工作。解决方案是在 webpack 中使用 

umd
作为输出库类型。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.