javascript - app.js 中需要错误

Question

我最近开始开发一个用 Nodejs 编写的新游戏，由于某种原因，它不允许我在 app.js 中使用 require，我知道这是可能的，因为我制作了其他类似的游戏

这是我在网站控制台中收到的错误 Uncaught ReferenceError :未定义要求
在 app.js:2

这也是它所引用的代码

var socket;
var pg = require('pg');

var config = require('../../config.json');

var conString = config.database.uri;

var client = new pg.Client(conString);
client.connect();

此错误阻碍了我的其余代码的运行，我几乎可以肯定这一行

var config = require('../../config.json');

修复第一个后也会产生错误

根据 webpack npm 和我所有其他项目，放置 "build": "webpack" 应该允许在 app.js 中 require，但它不起作用

这是我的 package.json

{
  "name": "CodingIdleMasters",
  "version": "0.0.1",
  "description": "Placeholder",
  "main": "server/server.js",
  "scripts": {
    "build": "webpack",
    "start": "node server/server.js"
  },
  "author": "FlamingGenius",
  "contributors": [
    "Joseph Williamson <deathcrow4561@gmail.com> (https://github.com/FlamingGenius)"
  ],
  "dependencies": {
    "express": "^4.13.4",
    "socket.io": "^1.4.6",
    "socket.io-client": "^1.4.6",
    "webpack": "^1.13.1",
    "webpack-stream": "^3.2.0",
    "pg": "^1.0.0"
  }
}

如果您需要查看更多代码，这里是 github 上项目的链接 Github Project

如果它对我当前的层次结构有帮助

-client
 -css
  -main.css
 -js
  -app.js
  -game.js
  -menu.js
 -index.html
-server
 -server.js
-config.json
-package.json

编辑:

看来我需要 webpack 配置，但文档对于解释如何设置它确实很有帮助，如果有人可以提供解释如何设置它的答案，并可能提供一些代码，那将非常有帮助

Answer 1

require 用于 NodeJS，而不是浏览器。

但是，有一些方法可以让模块导入在浏览器中正常工作。如前所述，WebPack 是实现这一目标的一种方法。设置 WebPack 需要的不仅仅是将行添加到 package.json 并安装文件 - 您将需要一个配置文件和正确的构建:https://webpack.js.org/guides/

首先，确保您的 package.json 具有正确的依赖项(在本例中为 pg)并且已安装(检查 node_modules 目录)。

假设您现在想要的只是加载 JavaScript 模块，您可以使用位于项目根目录的以下配置文件 (webpack.config.js):

const path = require('path');

module.exports = {
    entry: {
        app: './client/app.js',
        game: './client/game.js',
        menu: './client/menu.js',
    },
    context: path.resolve(__dirname, '.'),
    devtool: 'source-map',
    target: 'web',
    resolve: {
        extensions: ['.js'],
        modules: [path.resolve(__dirname, 'client'), 'node_modules']
    },
    resolveLoader: {
        modules: ['node_modules']
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'client', 'dist') // output into /client/dist
    }
};

这将获取您的每个文件并捆绑脚本及其依赖项，以便其正常工作。使用 webpack --config webpack.config.js 运行它。我给了您一个非常简单的配置 - 在实际用例中，人们可能会将所有主文件打包到一个包中，而不是为每个脚本文件提供一个包。 WebPack 是一个非常强大的工具，您可以扩展您的使用范围，但我将把它留给您，因为我不知道您的确切设置(WebPack 指南有大量信息)。

话虽这么说，从客户端连接到数据库可能是可能的，但肯定不建议这样做。首先，pg 包是为在 NodeJS 上使用而设计的。其次，数据库连接应始终由服务器处理，并且客户端应仅与服务器交互。看看您的服务器，您当前只是提供内容而不执行任何操作 - 您尝试在客户端上使用数据库执行的所有操作都应该卸载到服务器。