在HTML运行nodeJS的练习

最新推荐文章于 2024-05-07 17:44:21 发布

不可能是NEET

最新推荐文章于 2024-05-07 17:44:21 发布

阅读量1.5k

点赞数 2

文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/qq_62957906/article/details/129438948

版权

HTML文件不能直接在node.JS服务器上调用函数，对nodejs中常用到的require,module.exports等功能浏览器不能直接使用。此次通过使用Browserify打包js文件来解决这个问题。

Browserify是一个JavaScript程序的静态模块打包器。首先在终端通过npm安装：

npm install browserify

安装完毕后，创建一个练习用的文件hello.js

module.exports = 'Hello World！';

创建main.js

var msg = require('./hello.js');
console.log("logInfo:", msg);

在终端启用Browserify进行打包

（如果打包失败，需要检查终端的路径是不是在目标文件对应的文件夹下）

打包成后可以看到打包后的js文件bundle.js

创建html文件，使用打包后的js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body></body>

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

</html>

在使用Browserify前，如果直接在html里使用nodejs代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body></body>
<script>
    var msg = require('./hello.js');
    console.log("logInfo:", msg);
</script>
</html>

浏览器会无发识别和执行require，结果如下：