broswerify

“Browserify lets you require('modules') in the browser by bundling up all of your dependencies.”

Browserify 可以让你在浏览器中通过 require('modules') 的写法加载依赖的模块。

浏览器本身不支持 require 和 define 的模块化开发，但是 nodejs 支持。使用 broswerify，就可以让浏览器支持和 nodejs 一样的开发方式。（这里不讨论 CMD 和 AMD）

首先是安装

$npm install broswerify --save-dev

编写一段 nodejs 脚本

//main.jsvar unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(unique(data));

uniq 是 nodejs 的一个模块

在 nodejs 环境中安装 uniq 模块

$npm install uniq --save-dev

现在可以测试下这段脚本在 nodejs 下的效果

$node main.js
//[ 0, 1, 2, 3, 4, 5 ]

之后就可以通过 broswerify 生成 budle.js：

$browserify main.js > bundle.js

在 html 中加载生成的 js 脚本，

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

就能在浏览器中运行刚才的结果。

watchify

和 broswerify 组队的自动对文件修改做出响应的工具

// 安装
$npm install watchify --save-dev// 监听当前目录文件状态，代替执行了 broswerify main.js > bundle.js
$watchify main.js > bundle.js// -d debug 模式，会生成 sourceMap
// =v 输出日志
$watchify main.js > bundle.js -d -v// -o  --outfile
$ watchify browser.js -d -o static/bundle.js -v// -o 也可以执行语句
watchify main.js -o 'exorcist static/bundle.js.map > static/bundle.js' -d

Beefy

官方推荐的基于 broswerify 和 watchify 开发的快捷启动服务的插件。

// 安装
$npm install beefy// 在127.0.0.1:9966启动一个 node 的服务，当通过这个服务访问 main.js 这个文件时，自动 bundle 并加载，参数-l 表示启用 liveloader
$beefy main.js -l
//> browserfy@1.0.0 start /your/path
//> beefy main.js -l
//
//beefy (v2.1.5) is listening on http://127.0.0.1:9966

实际使用中发现一个 bug，保存时自动加载的页面的 Js经常是上一次保存的内容。

看了源码后发现原来刷新页面和启动 broswerify 用的是两个文件监听，有个不太完美的解决方法就是：

修改文件 node_modules/beefy/lib/frontend-js/live-reload.js

window.location.reload();

setTimeout(function(){window.location.reload()}, 200);

转载于:https://www.cnblogs.com/yangyan/p/4871710.html

学习笔记 broswerify + watchify + beefy相关推荐

PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解发布: 2017年8月4日 7,195阅读 ...
容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
2020年Yann Lecun深度学习笔记（下）
2020年Yann Lecun深度学习笔记(下)
2020年Yann Lecun深度学习笔记（上）
2020年Yann Lecun深度学习笔记(上)
知识图谱学习笔记（1）
知识图谱学习笔记第一部分,包含RDF介绍,以及Jena RDF API使用知识图谱的基石:RDF RDF(Resource Description Framework),即资源描述框架,其本质是一个 ...
计算机基础知识第十讲,计算机文化基础（第十讲）学习笔记
计算机文化基础(第十讲)学习笔记采样和量化PictureElement Pixel(像素)(链接: 采样的实质就是要用多少点(这个点我们叫像素)来描述一张图像,比如,一幅420x570的图像,就表示 ...
Go 学习推荐 —（Go by example 中文版、Go 构建 Web 应用、Go 学习笔记、Golang常见错误、Go 语言四十二章经、Go 语言高级编程）
Go by example 中文版 Go 构建 Web 应用 Go 学习笔记:无痕 Go 标准库中文文档 Golang开发新手常犯的50个错误 50 Shades of Go: Traps, Gotc ...
MongoDB学习笔记(入门)
MongoDB学习笔记(入门) 一.文档的注意事项: 1. 键值对是有序的,如:{ "name" : "stephen", "genda" ...

学习笔记 broswerify + watchify + beefy

broswerify

watchify

Beefy

学习笔记 broswerify + watchify + beefy相关推荐

最新文章

热门文章