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

Question

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

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

我理解这是因为node.js是一种服务器端技术，所以当应用程序上线时，客户端不理解 required 是什么意思。

通过进一步的研究，我发现我有两个选择，要么通过 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 服务器发出请求，然后服务器发回响应。

快递取决于Node.js。它需要由 Node.js 提供的功能（例如侦听网络请求的能力），这些功能在浏览器中不可用。

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

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

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

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

How to implement Express + Node JS + Browserify properly?

javascript

node.js

npm

express

browserify