Javascript 获得；未捕获类型错误“；使用Webpack编译js文件时_Javascript_Node.js_Webpack

Javascript 获得；未捕获类型错误“；使用Webpack编译js文件时

javascript node.js webpack

Javascript 获得；未捕获类型错误“；使用Webpack编译js文件时,javascript,node.js,webpack,Javascript,Node.js,Webpack,我正在尝试使用Webpack创建一个简单的node.js应用程序来编译我的javascript文件。我是node.js的新手，所以我很难理解我做错了什么以及应该如何做很抱歉，这将是非常冗长的，但我在配置方面遇到了问题，我不确定是哪个特定文件导致了问题，所以我发布了很多代码。真的很抱歉到目前为止，我的应用程序架构如下： app └─app.js └─package.json └─package-lock.json └─webpack.config.js └─views |

我正在尝试使用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

在my 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"));

在my public/javascript/scripts/foo.js中：

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

 module.exports = { foo };

在my public/javascript/index.js中：

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

 foo();

在my 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
 };

在我的视图/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>

并以以下方式启动客户端：

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:1）
在r（main.js:1）
在main.js:1
在main.js:1

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

问题在于您的导出：

module.exports={foo}；

这是一本写作的书

module.exports={
福：福，
};

也就是说，一个对象具有一个键

“foo”

，函数的值命名为

foo

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

module.exports=foo；

问题在于您的导出：

module.exports={foo}；

这是一本写作的书

module.exports={
福：福，
};

也就是说，一个对象具有一个键

“foo”

，函数的值命名为

foo

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

module.exports=foo；

一个小细节：你的标题和标签上写着“webpack”，这是Ruby on Rails上的一个gem，似乎你想用“webpack”来代替。我想知道它是否与你的

模块中foo
的括号有关。导出Oops。我太习惯了RoR，我想我把它们混在一起了哈哈，谢谢你的澄清，@Nit@c_sagan，正确的导出方法是不使用{}
？我觉得他们必须在场，我要试一试！一个小细节：你的标题和标签上写着“webpack”，这是Ruby on Rails上的一个gem，似乎你想用“webpack”来代替。我想知道它是否与你的模块中foo
的{}
括号有关。我太习惯了RoR，我想我把它们混在一起了哈哈，谢谢你的澄清，@Nit@c_sagan，正确的导出方法是不使用{}？我觉得他们必须在场，我要试一试！
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