自动刷新浏览器网页的三方插件

目录

前言：在搭建的node项目中，每次页面，或者文件发生改动，必须要重启服务，才能看到页面效果，所以，有没有什么方法，可以在页面改动后，自动刷新浏览器网页；以下就是2个三方插件；来实现自动刷新浏览器，并且能够在不同的设备之间监听用户的交互行为，例如滚动、点击和表单输入等行为

1.node的模块browser-sync

1.1安装插件

1.2创建实例

2.node的第三方模块chokidar

1.安装chokidar

2.创建实例

前言：在搭建的node项目中，每次页面，或者文件发生改动，必须要重启服务，才能看到页面效果，所以，有没有什么方法，可以在页面改动后，自动刷新浏览器网页；以下就是2个三方插件；来实现自动刷新浏览器，并且能够在不同的设备之间监听用户的交互行为，例如滚动、点击和表单输入等行为

1.node的模块browser-sync

它可以创建微型node服务，来辅助本地开发；使用browserSync只用require导入项目中，就能使用了

1.1安装插件

npm install browser-sync 

1.2创建实例

let browserSync = require("browser-sync").create()browserSync.init(config, callback) //初始化

（1）browserSync.init的config配置项是必须的，callback回调函数可选

config常用的参数

const config = {port: 6060, //默认3000proxy: "http://localhost", //代理网页地址files: ["src/**"], //监听的文件夹，middleware: [{route: "/api", //处理一些api接口handle: (req, res, next) => {}}],serveStatic: [ //处理静态资源{route: "/assets",dir: ["./tem", "./images"] //静态资源目录}],https: true, //是否启用https的服务
}browserSync.init(config)

proxy -- 必选：代理的页面地址

其余都是非必选

参考资料：https://browsersync.bootcss.com/docs/options

2.node的第三方模块chokidar

chokidar是监听当前文件夹，下面的所有子文件

1.安装chokidar

npm i chokidar

2.创建实例

const chokidar = require("chokidar");//创建watch实例
const watch = chokidar.watch(".", {ignored: /(^|[\/\\])\../, //忽略.文件cwd: ".", //当前目录depth: 1, //监听深度，1表示监听一层子文件，0表示不监听子文件，可监听无穷深的层级persistent: true //表示是否保护进程不退出持久监听，默认值为true
})watch.on("all", (event, path) => { //监听除了ready，error，raw以外的所有事件//event 触发的事件，例如：change，add，unlink等
})watch.add("./test") //增加监听的文件
watch.unwatch("./index.js") // 不监听某个文件watch.close() //关闭所有监听器let allWatcher = watch.getWatched() //获取所有的监听实例for(let key in allWatcher ) {console.log("path:", key); //路径，如果没有指定cwd的话，为绝对地址，有cwd的话，为相对地址console.log("file", allWatcher[key])
}

参考资料：https://github.com/paulmillr/chokidar

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！