[英]How to access index.js from static page in NodeJS
I'm currently working on a project in NodeJS where it hosts a tiny web server and opens a web browser navigated to this web server when the user issues the command npm start
. 我目前正在NodeJS中的一个项目上工作,该项目中它承载着一个小型Web服务器,并在用户发出命令
npm start
时打开一个导航到该Web服务器的Web浏览器。
My project directory structure is as following: 我的项目目录结构如下:
root_directory/
node_modules/
server/
index.html
css/
html/
js/
main.js
.jshintrc
index.js
package.json
package-lock.json
index.js
in the root directory is the main file for NodeJS to execute on npm start. 根目录中的
index.js
是NodeJS在npm start上执行的主要文件。 The server
directory contains static files served by Express. server
目录包含Express提供的静态文件。
index.js 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 main.js
var underscore = require("underscore");
// ^ This part is going wrong
console.log("Server loaded successfully.");
When I try to require()
in the static file main.js
, it throws the following error: 当我尝试在静态文件
main.js
中的require()
时,它引发以下错误:
main.js:1 Uncaught ReferenceError: require is not defined
at main.js:1
My question is: 我的问题是:
How do I use NodeJS libraries/functions such as
require()
in static pages served by Express?如何在Express提供的静态页面中使用NodeJS库/函数(例如
require()
?
The require()
function works, of course, in index.js
because it's run by Node. 当然,
require()
函数在index.js
因为它由Node运行。
The require()
statement is not recognised by the browser. 浏览器无法识别
require()
语句。 In order for it to work you should use a client-side runtime library such as requireJs , or use a build-time bundler such as browserify or webpack . 为了使其正常工作,你应该使用一个客户端运行时库如requireJs ,或使用一个构建时打捆如browserify或的WebPack 。
Extending from the above post: 从以上帖子扩展:
Yes you will need some form of bundler that transforms your code. 是的,您将需要某种形式的捆绑器来转换您的代码。 Browserify is usually quite useful.
Browserify通常非常有用。 It will define the "require" function for you and create the appropriate logic to be able use modules in the browser.
它将为您定义“ require”功能,并创建适当的逻辑以能够在浏览器中使用模块。
Here are some instructions on how you may go about it: 以下是一些有关如何进行的说明:
Install Browserify globally using npm: 使用npm全局安装Browserify:
npm install -g browersify
Then once you're ready to bundle for the web: A common naming convention for the output file is "bundle" 然后,当您准备捆绑到网络上时:输出文件的常见命名约定是“ bundle”
browserifsy index.js -o bundle.js
Note: you can add this line into your "scripts" in the package.json for every project so you do not have to repeat that line again. 注意:您可以在每个项目的package.json中的“脚本”中添加此行,因此您不必再次重复该行。
"scripts" : {
"build" : "browserify index.js -o bundle.js"
}
Howevever, bundling it again and again is a pain when debugging or making complex applications. 但是,在调试或制作复杂的应用程序时,一次又一次地捆绑它是很痛苦的。 To overcome that use Budo.
为了克服这个问题,请使用Budo。
Budo is a live development server using browserify and allows you to use the nodejs require syntax with live updates Budo是使用browserify的实时开发服务器,可让您使用带有实时更新的nodejs require语法
Simply install it globally: 只需在全局安装:
npm install -g budo
Then run the budo server: 然后运行budo服务器:
budo index.js:bundle.js
or to automatically open the web browser to the specific localhost port where browserify serves to 或自动将网络浏览器打开到浏览器服务用于的特定本地主机端口
budo index.js:bundle.js --open
Then make sure to include "bundle.js" as a script in your html. 然后确保在HTML中包含“ bundle.js”作为脚本。 Now all your modular code should work perfectly and you can watch it update live as you code.
现在,您所有的模块化代码都应该可以正常工作,并且您可以在编写代码时观看它的实时更新。
Hope that helped! 希望能有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.