在日常开发中, 有时浏览器网页的功能需要调用 Node.JS 中的模块, 比如加密解密模块, 本文将以 Node.JS 的 uniq 模块为例, 讲解如何在浏览器的 JS 中调用 Node.JS 的 uniq 模块.
JS 调用 Node.JS 的方法步骤如下:
一, 安装配置所需环境
1, 安装 node(推荐: node 环境怎么安装? https://www.html.cn/qa/node-js/10701.html )
2, 环境配置
vi /etc/profile
3, 在文件末尾加入
- export NODE_HOME=/usr/local/src/node-v10.15.0-Linux-x64
- export PATH=$PATH:$NODE_HOME/bin
- export NODE_PATH=$NODE_HOME/lib/node_modules
4, 执行下列命令更新配置
source /etc/profile
5, 验证
在命令行输入
node -v
6, 安装 NPM
一般安装完 node, 就自带了 NPM, 在命令行输入
NPM -v
返回
6.4.11
说明 NPM 安装成功
7, 安装 browserify
browserify 是打包 Node.JS 模块为浏览器 JS 引用的工具.
NPM install -g browserify
命令行输入
browserify --help
返回帮助信息, 则说明安装成功
二, 构建 node 项目
1, 初始化
选择开发目录创建文件夹
- mkdir hellotest
- cd hellotest
- NPM init
然后根据提示输入一些项目信息
2, 安装 Node.JS 的 uniq 模块
在工作目录执行下列命令即可完成安装
NPM install uniq
3, 创建入口文件
执行命令
VIM index.JS :wq
无需键入信息, 直接保存后退出
4, 打包输出文件
执行命令
browserify -r uniq index.JS> bundle.JS
三, 在浏览器端引用
1, 创建 index.HTML 并引用 bundle.JS
- <HTML>
- <meta charset="utf-8">
- <head>
- <tittle>JS 调用 Node.JS 模块 </tittle>
- <script type="text/javascript" src="bundle.js"></script>
- <script type="text/javascript">
- function postStr(){
- try{
- var uniq = require('uniq');
- var nums = [5,2,1,3,2,5];
- var numsUniq = uniq(nums)
- console.log(numsUniq);
- document.getElementById("info").innerHTML=numsUniq;
- }
- catch(err){
- alert(err.message);
- }
- }
- </script>
- </head>
- <body>
- <form action="">
- <p><div id="info"> 使用 uniq 函数后数组内容 </div> </p>
- <p><input type="button" id="btn_post" onclick="postStr()" value="测试调用 node 函数"/></p>
- </form>
- </body>
- </HTML>
2, 浏览器打开 HTML
index.HTML 文件与 bundle.JS 放在同一目录, 然后浏览器打开, 单击按钮, 执行函数, 即可输出 uniq 函数结果. 如下图
单击前
单击后
来源: http://www.css88.com/qa/node-js/10702.html