如何使用快速服務器在html中加載JS文件

Question

我把我的js放在一個公共目錄中，試圖在我的HTML中加載js但是收到錯誤。

---

var express=require('express');
var bodyparser=require('body-parser');
var path=require("path");
var multer=require("multer");
console.log(__dirname);
var app=express();
var upload = multer({ dest: __dirname + '/uploads/' });
// app.set('views', __dirname + '/views');
app.use(bodyparser.json());
app.use(bodyparser.urlencoded({extended:true}));
app.use(express.static(path.join(__dirname, 'public')));
 app.engine('html', require('ejs').renderFile);
app.get('/',(req,res)=>{
     res.render('some.ejs');
});
app.post('/',upload.single('upl'),(req,res)=>{
    console.log(req.body);
    console.log(req.file);
})
app.listen(3000,()=>{
    console.log("server is up");
})

---

這是我加載JS的HTML代碼：

<script src="/public/web.js"></script>

目錄結構

├ public
| └ web.js
├ views
| └ some.ejs
└ server.js

Answer 1

要從服務器向客戶端提供文件，必須將該目錄聲明為靜態。

使用快遞你可以使用，

app.use(express.static('PublicDirectoryPath'))

要獲取公共目錄下的文件，

<script src="FilePathUnderPublicDirectory"></script>

更新的代碼：

現在你的server.js文件應該是

var express=require('express');
var bodyparser=require('body-parser');
var path=require("path");
var multer=require("multer");
console.log(__dirname);
var app=express();
app.use(express.static('public'));
var upload = multer({ dest: __dirname + '/uploads/' });
// app.set('views', __dirname + '/views');
app.use(bodyparser.json());
app.use(bodyparser.urlencoded({extended:true}));
app.use(express.static(path.join(__dirname, 'public')));
 app.engine('html', require('ejs').renderFile);
app.get('/',(req,res)=>{
     res.render('some.ejs');
});
app.post('/',upload.single('upl'),(req,res)=>{
    console.log(req.body);
    console.log(req.file);
})
app.listen(3000,()=>{
    console.log("server is up");
})

請注意，我將公共目錄聲明為第7行的靜態目錄。

由於您的web3.js直接位於public目錄下，因此請在前端使用

<script src="/web.js"></script>

有關更多信息，請查看文檔 。

Answer 2

要提供靜態文件（如圖像，CSS文件和JavaScript文件），請使用Express中的express.static內置中間件功能。

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

現在你可以提供像js，css和圖像這樣的靜態文件。