Получение «Uncaught TypeError» при компиляции js-файлов с помощью Webpack - PullRequest
1 голос
/ 23 октября 2019

Я пытаюсь создать простое приложение node.js, использующее Webpack для компиляции моих файлов 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"));

в моих общедоступных / javascript / scripts/foo.js:

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

 module.exports = { foo };

в моем общедоступном / 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
 };

и вmy 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, но яне знаю, что там может быть не так.

1 Ответ

0 голосов
/ 25 октября 2019

Проблема в вашем экспорте:

module.exports = { foo };

Это сокращенная запись для записи

module.exports = {
    foo: foo,
};

То есть объект с одним ключом "foo", со значением вашей функции с именем foo.

Когда вам позже потребуется модуль, вы пытаетесь вызвать экспорт модуля, который является не функцией, а объектом вокруг нее. Если вы хотите просто экспортировать одну функцию и импортировать одну функцию, вы можете вместо этого сделать:

module.exports = foo;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...