Question

现在标题似乎模糊不清，但是由于是节点的菜鸟，很难正确描述我的问题。

但是我会尽我所能描述我的问题。

所以我有四个文件：index.html，script1.js，script2.js。

index.html：

<!-- index.html -->
<html>
    <head>
    </head>
    <body>
        <script src="script1.js"> </script>
    </body>
</html>

script2.js不包含在html中，而是使用节点命令node script2.js进行编译。

现在可以说我将index.html与script2.js（终端中的节点script2.js）一起编译了。从这里开始，我希望script2.js将数据发送到script1.js以使其显示传递到HTML的数据。

我认为我必须使用服务器，但是我想尝试避免使用它（如果这很有意义）。我该如何“本地”执行此操作？

谢谢，我希望我的解释不要太混乱。我很期待您的回答！

Answer 1

我假设您在script2.js中具有某些功能，script1.js可以使用该功能来填充DOM？

我认为您正在寻找的是将script2.js导入script1.js

例如

script1.js-

import * as script2 from 'script2.js' 
// or const script2 = require('script2.js')
// or import { getData } from 'script2.js'

const divtext = script2.getData(); 

var div = document.getElementById('divID');

div.innerHTML += 'Data from script2:' + divtext;

script2.js-

const getData = () => {
  return "This is some info for div"
};

export getData;

Answer 2

没有服务器就无法实现您所描述的内容。如果服务器包含与此类似的代码，则可以通过运行node script2.js来运行服务器：

const express = require('express');
const app = express();
const server = require('http').createServer(app);
const path = require('path');


app.use(express.static(path.join(__dirname, 'public')));

server.listen(3000, () => {
  console.log('Server listening at port %d', 3000);  
});

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

app.get('/get-data', function(req, res) {
  // send data from server to script1.js
});

然后，当您想从script1.js获取数据时，您可以执行以下操作（在script1.js中）：

fetch('http://localhost:3000/get-data')
  .then(res => { /* do something with data */ })
  .catch(err => { /* handle errors */ });

有很多方法可以不使用express来实现，但这似乎很容易。

如何在html和节点之间一起通信？

2 个答案: