Question

我正在尝试使用Webpack创建一个简单的node.js应用程序来编译我的javascript文件。我对node.js完全陌生，因此我很难理解自己在做什么以及应该如何做。

很抱歉，这确实会花费很多时间，但是我在配置时遇到了麻烦，而且我不确定哪个特定文件导致了此问题，因此我发布了很多代码。真的很抱歉。

到目前为止，我的应用程序体系结构如下：

app

 └─app.js
 └─package.json
 └─package-lock.json  
 └─webpack.config.js
 └─views
 |  └─index.ejs
 └─public 
    └─javascript
       └─scripts //where I put functions i am importing into index.js
       |   └─foo.js
       |   └─bar.js
       └─index.js //file with all js functions create
       └─main.js //bundle made by webpacker

在我的app.js文件中：

 const path = require("path");
 const express = require("express");
 const port = process.env.PORT || "8000";

 const app = express();
 app.set("view engine", "ejs");
 app.use(express.static("public"));

在我的public / javascript / scripts / foo.js中：

 const foo = () => {
   ....
 };

 module.exports = { foo };

在我的public / javascript / index.js中：

 const foo = require("./scripts/foo");

 foo();

在我的webpack.config中：

 const path = require("path");
 module.exports = {
   context: __dirname,
   entry: "./public/javascript/index.js",
   output: {
     path: path.resolve(__dirname, "public/javascript"),
     filename: "main.js"
   },
   watch: true
 };

以及在我的views / index.ejs中：

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <title>Objects</title>
     <link rel="stylesheet" type="text/css" href="/css/style.css" />
   </head>
   <body>
     ...
     <script type="text/javascript" src="/javascript/main.js"></script>
   </body>
 </html>

然后我用以下命令启动服务器：

nodemon ./app.js

并使用以下命令启动客户端：

webpack --config ./webpack.config.js

该html在浏览器中的加载情况很好，但是javascript无法正常运行，并且控制台显示：

Uncaught TypeError: r(...) is not a function
    at Object.<anonymous> (main.js:1)
    at r (main.js:1)
    at main.js:1
    at main.js:1

r（...）是在main.js中编译所有js文件时创建的Webpack，但我不知道那里可能有什么问题。

Answer 1

问题是您的出口：

module.exports = { foo };

这是用于写作的shorthand notation

module.exports = {
    foo: foo,
};

即，一个具有单个键"foo"且对象的值名为foo的对象。

以后需要模块时，您尝试调用模块导出，这不是函数，而是函数周围的对象。如果您只想导出单个函数并导入单个函数，则可以执行以下操作：

module.exports = foo;

使用Webpack编译js文件时出现“ Uncaught TypeError”

1 个答案: