nodejs/express 包含本地 js 文件答案

【问题标题】：nodejs/express include local js filenodejs/express 包含本地 js 文件
【发布时间】：2015-03-30 22:14:34
【问题描述】：

这是我当前的文件夹结构

css
   app.css
js
  app.js
node-modules
index.html
node-server.js
package.json

节点服务器托管index.html，但我不知道如何加载app.js 和app.css 文件。

index.html 加载它们：

<script src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/app.css"/>

这是错误信息：

Failed to load resource: the server responded with a status of 404 (Not Found)
2http://localhost:3000/css/app.css Failed to load resource: the server 
responded with a status of 404 (Not Found)

我知道我需要 require 或加载模块或其他东西，只是不知道是什么。

谢谢

【问题讨论】：

那么，呃，你的 node.js 服务器代码在哪里？
您必须在您的快递应用程序中添加类似app.use(express.static('css')); 的内容，然后使用href="/app.css" 在html 中引用它，但最好将js 和css 文件夹放入public文件夹，然后将其添加到您的快速应用代码：app.use(express.static('public'));
哇，呃！我忘了那部分@TomaszKasperek。谢谢。

标签： javascript html css node.js express

【解决方案1】：

原因 Node.Js 不会自己提供静态内容，必须定义路由以通过 Node 提供静态内容。

解决方案（手动）：

var express = require('express'),
    path = require('path'),
    app = express();

app.get('/index.html',function(req,res){
   res.sendFile(path.join(__dirname + '/index.html')); 
});

app.get('/css/app.css',function(req,res){
    res.sendFile(path.join(__dirname + '/css/app.css')); 
});

app.get('/js/app.js',function(req,res){
    res.sendFile(path.join(__dirname + '/js/app.js')); 
});

app.get('/', function(req, res) {
    res.redirect('index.html');
});

app.listen(8080);

更好的解决方案：

目录结构：

public
 css
   app.css
 js
  app.js
 index.html

代码：

var express = require('express'),
    path = require('path'),
    app = express();

// Express Middleware for serving static files
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function(req, res) {
    res.redirect('index.html');
});

app.listen(8080);

【讨论】：

【解决方案2】：

正如Tomasz Kasperek 所指出的，您需要让 Express 知道您打算将这些文件托管在静态目录中。这在技术上称为defining static middleware。

这应该类似于：

var express = require('express');
var app = express();

// first parameter is the mount point, second is the location in the file system
app.use("/public", express.static(__dirname + "/public"));

它超级简单，我建议您制作某种public 文件夹，而不是费心将特定文件和文件夹设为静态。

然后文件将简单地从根 index.html 引用：

<link href="public/css/reset.css" rel="stylesheet" type="text/css">

希望对您有所帮助！

【讨论】：

你必须确保你包含 express 这样： var express = require('express'); var app = express();否则它会告诉你快递没有定义，你会想打婴儿。
我觉得这应该是给定的，但为了完整起见，我添加了它。好收获！
这不是给我的，我引用的例子让我做 var app = require('express')() 我想，这让我很伤心。

【解决方案3】：

我通过使用这个语法让它工作

app.use(express.static('public'));

复制'public'目录下的css和js文件然后在 index.html 文件中添加引用

<link rel="stylesheet" href="/css/reset.css">

【讨论】：

【解决方案4】：

//we are in ./utils/dbHelper.js, here we have some helper functions
function connect() {
  // connect do db...
}

function closeConnection() {
  // close connection to DB...
}

//let's export this function to show them to the world outside
module.exports = {
  connect(),
  closeConnection()
};

// now we are in ./main.js and we want use helper functions from dbHelper.js
const DbHelper = require('./utils/dbHelper'); // import all file and name it DbHelper
DbHelper.connect(); // use function from './utils/dbHelper' using dot(.)

// or we can import only chosen function(s)
const {
  connect,
  closeConnection
} = require('./utils/dbHelper');
connect(); // use function from class without dot

【讨论】：