Question

我目前正在NodeJS中的一个项目上工作，该项目承载一个小型Web服务器，并在用户发出命令npm start时打开一个导航到该Web服务器的Web浏览器。

我的项目目录结构如下：

    root_directory/
       node_modules/
       server/
         index.html
         css/
         html/
         js/
           main.js

       .jshintrc
       index.js
       package.json
       package-lock.json

根目录中的

index.js是NodeJS在npm start上执行的主要文件。 server目录包含Express提供的静态文件。

index.js

const express = require('express');
const app = express();
const opn = require('opn');

{ ... }

function startServer() {
    console.log("Starting server...");

    // Start the web server
    app.use(express.static('server')); // <- Serve the 'server' directory as static content
    app.listen(7120, function() {
        console.log("Successfully started server!");
    });

    // Open a browser window navigated to the server
    opn("http://localhost:7120");
}

main.js

var underscore = require("underscore");
                 // ^ This part is going wrong

console.log("Server loaded successfully.");

当我尝试在静态文件require()中main.js时，它将引发以下错误：

main.js:1 Uncaught ReferenceError: require is not defined
    at main.js:1

我的问题是：

如何在Express提供的静态页面中使用诸如require()之类的NodeJS库/功能？

require()函数在index.js中有效，因为它由Node运行。

Answer 1

浏览器无法识别require()语句。为了使其正常工作，您应该使用客户端运行时库，例如$dateFromString，或使用构建时捆绑程序，例如requireJs或browserify。

Answer 2

从以上帖子中延伸出来：

是的，您将需要某种形式的捆绑器来转换您的代码。 Browserify通常非常有用。它将为您定义“ require”功能，并创建适当的逻辑以能够在浏览器中使用模块。

以下是有关如何进行操作的说明：

使用npm全局安装Browserify：

browserifsy index.js -o bundle.js

然后，当您准备捆绑到网络上时：输出文件的常见命名约定是“ bundle”

"scripts" : {
  "build" : "browserify index.js -o bundle.js"
}

注意：您可以为每个项目将此行添加到package.json的“脚本”中，因此您不必再次重复该行。

npm install -g budo

但是，在调试或制作复杂的应用程序时，一次又一次地捆绑它是很痛苦的。要克服这一点，请使用Budo。

Budo是使用browserify的实时开发服务器，可让您使用带有实时更新的nodejs require语法

只需将其全局安装：

budo index.js:bundle.js

然后运行budo服务器：

budo index.js:bundle.js --open

或自动将Web浏览器打开到browserify服务的特定本地主机端口

data-order

然后确保在HTML中包含“ bundle.js”作为脚本。现在，您所有的模块化代码都应该可以正常工作，并且您可以在编写代码时观看它的实时更新。

希望有帮助！

如何从NodeJS的静态页面访问index.js

2 个答案: