如何正确实现 Express + Node JS + Browserify？

Question

所以我对使用 node.js 的整个 Web 开发有点陌生，我想知道是否有人可以帮助我了解如何正确实现我的应用程序。

因此，该应用程序是一个带有电子邮件表单的简单登录页面，该表单接收电子邮件并将其发送到 API。我设计了这个功能没有问题，除非当我启动我的网站时，我得到了一个必需的未定义错误。

我知道这是因为 node.js 是一种服务器端技术，所以当应用程序上线时，客户端不明白所需的含义。

通过进一步的研究，我发现我有两种选择，一种是通过 Browserify 之类的东西实现同步依赖，另一种是异步处理并使用 RequireJS 之类的东西。

现在我决定使用 Browserify，（除非有人能说服我）我只需要帮助来弄清楚如何为我的特定应用程序实现它。

app.js

//The dependenices my node js app needs (also where the require bug occurs)
//------------------------------------------------------------------------------------------------------------------------
const express = require('express'); //Require the express package that we installed with npm install express

const request = require('request'); //Require the express package that we installed with npm install request

const bodyParser = require('body-parser'); //Require the express package that we installed with npm install bodyParser

const path = require('path'); //Require the express package that we installed with npm install path
//------------------------------------------------------------------------------------------------------------------------



const app = express(); //Creates the application with express


//Middleware
app.use(express.json()); //Tells express to use JSON as it's input

app.use(bodyParser.urlencoded({ extended: false })); //Prevents XSS, only will return if the url has specified enconding

app.use(express.static(path.join(__dirname, '/site'))); //Tells the app to use the current path D:\Gaming Galaxy\Website\Website\main\site as the dir for the website

console.log("The directory used is", express.static(path.join(__dirname, '/site')));

app.post('/subscribe', (req, res) => { //Makes a post request to express req is the request and res is the response
    const { email, js } = req.body; //Create a constant that makes up of the request's body

    const mcData = { //Create a constant JSON object mcData, that contains the email from the above constant and a status message
        members: [
            {
                email_address: email,
                status: 'pending'
            }
        ]
    }

    const mcDataPost = JSON.stringify(mcData); //Turns the JSON object into a string

    const options = { //Sets a JSON object of a bunch of options that mailchimp will use
        url: 'https://us20.api.mailchimp.com/3.0/lists/f10300bacb',
        method: 'POST',
        headers: {
            Authorization: 'auth f24c3169da044653d1437842e39bece5-us20'
        },
        body: mcDataPost
    }

    if (email) { //If there's an email that exists
        request(options, (err, response, body) => { //Send a request to mail chimp
            if (err) { //If there's an error
                res.json({ error: err }) //Print said error
            } else { //If there's not an error
                if (js) {  //If javascript is enabled (boolean)
                    res.sendStatus(200); //Send a success message
                } else {
                    res.redirect('/success.html'); //If it's disabled, send them to a successful HTML page.
                }
            }
        })
    } else {
        res.status(404).send({ message: 'Failed' }) //If the email doesn't exist, have it fail
    }

});

app.listen(5000, console.log('Server started!')) //Console log that confirms the start of the server

package.json

{
  "name": "gaminggalaxy",
  "version": "1.0.0",
  "main": "site/js/app.js",
  "dependencies": {
    "body-parser": "^1.19.0",
    "commonjs": "^0.0.1",
    "express": "^4.17.1",
    "index": "^0.4.0",
    "node-fetch": "^2.6.6",
    "prototype": "^0.0.5",
    "request": "^2.65.0",
    "requirejs": "^2.3.6",
    "uniq": "^1.0.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  },
  "scripts": {
    "serve": "node app",
    "dev": "nodemon app"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/InvertedTNT/Main.git"
  },
  "bugs": {
    "url": "https://github.com/InvertedTNT/Main/issues"
  },
  "homepage": "https://github.com/InvertedTNT/Main#readme",
  "description": ""
}

index.html（表单本身）

<form action="/subscribe" method="POST">
   <div class="newsletter-form-grp">
        <i class="far fa-envelope"></i>
        <input type="email" name="email" id="email"
              placeholder="Enter your email..." required>
    </div>
    <button id="cta">SUBSCRIBE <i class="fas fa-paper-plane"></i></button>
</form>

文件夹结构

node_modules
site
  -index.html
  -css
  -js
     - app.js
  -images
app.js
package-lock.json
package.json

感谢您的帮助，如果我能就如何使用这些依赖项和 browserify 的整体实现提供任何建议，我将不胜感激。

Answer 1

浏览器是 HTTP 客户端。

Express 是一个构建 HTTP 服务器的框架。

HTTP 客户端向 HTTP 服务器发出请求，然后返回响应。

Express 依赖于 Node.js。它需要 Node.js 提供的功能（例如侦听网络请求的能力），而这些功能在浏览器中不可用。

Browserify 可以将使用模块编写的 JavaScript 捆绑到可以在浏览器中运行但仅不依赖于 Node.js 的非模块代码中- 特定的功能。 （即如果 JS 模块是 pure JS 或依赖于浏览器特定的功能）。

Browserify 无法让 Express 在浏览器中运行。

---

当您使用 Node.js 运行 JS 程序时，您可以在浏览器的地址栏中键入程序创建的服务器的 URL 以连接到它。