Node.js 文件未读取脚本标记中的 browser.js 文件答案

【问题标题】：Node.js file not reading browser.js file in script tagNode.js 文件未读取脚本标记中的 browser.js 文件
【发布时间】：2021-08-20 16:12:31
【问题描述】：

我花了太多时间试图弄清楚这一点，但做不到！我正在关注一个 udemy 教程，他编写了与下面相同的代码，但它不会连接到浏览器文件并从浏览器环境运行代码。

let express = require('express')
const {MongoClient} = require('mongodb')
let app = express()
let db 
 
app.use(express.static('public'))

//connect mongodb to code
let connectionString = 'mongodb+srv://todoAppUser:PASSWORD@cluster0.jt6vs.mongodb.net/todoAppPractise?retryWrites=true&w=majority' 
  MongoClient.connect(connectionString, {useNewUrlParser: true}, function(err, client) {

  //updating global variable db 
  db = client.db()
  app.listen(3000)
  console.log("DB connection successfull")
})

app.use(express.urlencoded({extended: false}))

app.get('/', function(req, res){
//load the items submitted to the database as items on front end of list. 
db.collection('items').find().toArray(function(err, item){
  res.send(`<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple To-Do App</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <h1 class="display-4 text-center py-1">To-Do App</h1>
      
      <div class="jumbotron p-3 shadow-sm">
        <form action="/create-item" method="POST">
          <div class="d-flex align-items-center">
            <input name="item" autofocus autocomplete="off" class="form-control mr-3" type="text" style="flex: 1;">
            <button class="btn btn-primary">Add New Item</button>
          </div>
        </form>
      </div>
      
      <ul class="list-group pb-5">
       
        ${item.map(function(items){
          return ` <li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
          <span class="item-text">${items.text}</span>
          <div>
            <button class="edit-me btn btn-secondary btn-sm mr-1">Edit</button>
            <button class="delete-me btn btn-danger btn-sm">Delete</button>
          </div>
        </li>`
        }).join('')}
      </ul>
      
    </div>
    <script src="/browser.js">
    </script>
  </body>
  </html>`)
})
 
})

app.post('/create-item', function(req, res){
  //console.log(req.body.item)
  db.collection('items').insertOne({text: req.body.item}, function(){
    res.redirect('/')  
  })
 
})

在 browser.js 文件上：

alert("hello from browser.js")

当我加载 localhost:3000 时，我应该得到一个警报，但无论我尝试什么，它都没有响应/读取文件。

【问题讨论】：

您可以尝试在您的文件中进行控制台登录，看看它是否能到达那里。
您可以使用旧的好方法，并尝试查看讲师是否共享他的文件，如果是，则进行比较或测试。
它甚至没有使用 console.log 来获取它，所以它甚至没有到达那里。也是的，看过他的代码，但它仍然不起作用，但课程已有 2 年历史，所以我认为它与更新不兼容

标签： javascript html node.js express

【解决方案1】：

请尝试使用require函数导入JS文件。它是节点中用于导入模块的功能之一。并且应该在browser.js 中具有导出功能，这是最佳做法。

let express = require('express')
const {MongoClient} = require('mongodb')
let app = express()
let db 
const browser = require('./browser')
 
 browser()

之后你可以使用browser

浏览器.js

function test(){
console.log('browser file is working');
}

module.exports = test;

【讨论】：

谢谢你的回答，但是这段代码给我一个错误：错误：找不到模块'browser.js'
@Jude Ferguson ，我认为browser.js 文件位于另一个位置。请确认。以上编写的代码仅在文件放在同一文件夹中时才有效。如果文件在另一个文件夹中，请更正路径。