一步步教你学会browserify
本文来自网易云社区
作者:孙圣翔
注意
文章需要边看边练习,不然你可能忘得速度比看的还快。
原文地址: http://my.oschina.net/goskyblue/blog/552284
Browserify
browserify的官网是http://browserify.org/,他的用途是将前端用到的众多资源(css,img,js,...) 打包成一个js文件的技术。
比如在html中引用外部资源的时候,原来我们可能这样写
<script src="/static/libs/landing/js/bootstrap.min.js"></script>
<script src="/static/libs/landing/js/jquery.flexslider-min.js"></script>
<script src="/static/libs/landing/js/jquery.nav.js"></script>
<script src="/static/libs/landing/js/jquery.appear.js"></script>
<script src="/static/libs/landing/js/headhesive.min.js"></script>
<script src="/static/libs/jquery/jquery-qrcode/jquery.qrcode.js"></script>
<script src="/static/libs/jquery/jquery-qrcode/qrcode.js"></script>
<script src="/static/libs/landing/js/scripts.js"></script>
但是有了 browserify 的帮助,就可以把这些通通压缩成一句
<script src="/bundle.js"></script>
而且不用担心,jQuery或者underscore等等库的冲突问题。
虽然这项技术也是最近几年才流行起来的,但是它迅速的在前端领域流行了起来。另一个跟browserify比较类似的是webpack,但这篇文章不打算介绍它,因为主页感觉不如browserify做的专业。
安装
安装起来很简单,不过首先你还需要需要先把nodejs装上。
npm install -g browserify
借助browserify你可以使用nodejs中常用到的require, module.exports功能。
简单入门
来个很简单的例子。
先创建一个hello.js文件,内容如下
module.exports = 'Hello world';
然后在创建一个entry.js文件,内容
var msg = require('./hello.js')console.log("MSG:", msg);
最后使用browserify进行进行打包
browserify entry.js -o bundle.js
然后entry.js和hello.js就被打包成一个bundle.js文件了。
写一个简单的index.html验证下效果
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>index</title>
</head>
<body>
<script src="bundle.js"></script>
</body></html>
然后用浏览器打开该文件,F12开启调试选项。应该会看到有一句MSG: Hello world被打印出来了。
这就是最简单的打包应用了。
打包npm中的库
先创建一个package.json文件,内容最简单的写下。
{
"name": "study_browserify"
}接着安装jquery库
npm i --save jquery
其中--save的意思是将jquery信息保存到package.json文件中。
修改下我们之前创建的hello.js文件成
module.exports = function(){ var $ = require('jquery')
$(function(){
$("body").html("Hello world, jquery version: " + $.fn.jquery);
})
};entry.js文件也要稍微修改下
var hello = require('./hello.js')
hello()查看效果
这时打开index.html,你会看到页面上有字了,出现了Hello world, jquery version ....
这样子做的好处有很多,即使这个页面你又引用了别的jquery也不会和hello.js里面使用到的冲突。因为打包出来的bundle.js把引用的jquery放到的局部变量里面。
利用gulp工具自动打包
gulp也是前端开发人员常用的一个工具,用起来效果就像Makefile似的。gulp的主页是http://gulpjs.com/ 主页那叫一个简洁。
gulp的配置文件是gulpfile.js,按照我提供的内容先创建一个,具体怎么使用可以之后再去看官网。
var gulp = require('gulp');var rename = require('gulp-rename');var browserify = require('gulp-browserify'); gulp.task('build', function(){ return gulp.src('./entry.js')
.pipe(browserify({
}))
.pipe(rename('bundle.js'))
.pipe(gulp.dest('./'))
}); gulp.task('default', ['build'], function(){ return gulp.watch(['./*.js', '!./bundle.js'], ['build'])
})
之后安装下依赖库
npm i -g gulpnpm i --save-dev gulp gulp-rename gulp-browserify
当前目录下启动gulp,效果就是每次你修改了js文件,都会调用browserify打包一次。
打包HTML资源
这个时候用到了另外一个库 stringify,有了这个库的帮忙,就可以这么着用require("./hello.html") 是不是很酷炫。
首先还是安装 npm i --save-dev stringify
之后需要稍微修改下gulpfile.js
原来这个样子
gulp.task('build', ['lint'], function(){ return gulp.src('./entry.js')
.pipe(browserify({
}))
.pipe(rename('bundle.js'))
.pipe(gulp.dest('./'))
});
增加几行代码,需要改造成这样. 第一行的require可以放到最上面。
var stringify = require('stringify'); gulp.task('build', ['lint'], function(){ return gulp.src('./entry.js')
.pipe(browserify({
transform: [
stringify(['.html']),
],
}))
.pipe(rename('bundle.js'))
.pipe(gulp.dest('./'))
});
为了验证效果。我们添加一个文件 hello.html
内容简单的写下
<strong>Hello</strong><span style="color:blue">World</span>
接着修改下hello.js,改成
module.exports = function(){ var $ = require('jquery')
$(function(){
$("body").html(require('./hello.html'));
})
};
重新打包,并再次刷新index.html 那个网页,就可以看到加粗的Hello,以及变蓝的World了。
添加静态代码检查
默认情况下,出现的一些低级错误,browserify是检查不到的。此时可以用js比较流行的代码检查工具jshint,官网是 http://jshint.com/
jshint相比较jslint配置少了不少,不过依然很多,闲麻烦的话,可以直接用我的。 下面的内容直接保存为文件 .jshintrc. 注意前面有个.
{
"camelcase": true,
"curly": true,
"freeze": true,
"immed": true,
"latedef": "nofunc",
"newcap": false,
"noarg": true,
"noempty": true,
"nonbsp": true,
"nonew": true,
"undef": true,
"unused": true,
"trailing": true,
"maxlen": 120,
"asi": true,
"esnext": true,
"laxcomma": true,
"laxbreak": true,
"node": true,
"globals": {
"describe": false,
"it": false,
"before": false,
"beforeEach": false,
"after": false,
"afterEach": false,
"Promise": true
}}
之后修改gulpfile.js文件为
var gulp = require('gulp');var rename = require('gulp-rename');var browserify = require('gulp-browserify');var jshint = require('gulp-jshint'); gulp.task('build', ['lint'], function(){ return gulp.src('./entry.js')
.pipe(browserify({
}))
.pipe(rename('bundle.js'))
.pipe(gulp.dest('./'))
}); gulp.task('lint', ['jshint'])
gulp.task('jshint', function(){ return gulp.src(['./*.js', '!./bundle.js'])
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
}) gulp.task('default', ['build'], function(){ return gulp.watch(['./*.js', '!./bundle.js'], ['build'])
})
然后安装几个新增的依赖
npm i --save-dev gulp-jshint jshint jshint-stylish
重新运行gulp, 然后故意把entry.js文件改的错一点。你就会发现编辑器开始提示你错误了。
后记
不知不觉写了很多gulp的东西,似乎gulp可以单独作为一篇文章了。哈哈,先这样了。
网易云免费体验馆,0成本体验20+款云产品!
更多网易研发、产品、运营经验分享请访问网易云社区。
相关文章:
【推荐】 行为式验证码的前景
【推荐】 知物由学 | 广告欺诈:如何应对数字广告里分羹者?
【推荐】 关于网易云验证码V1.0版本的服务介绍
一步步教你学会browserify的更多相关文章
- 一步步教你轻松学支持向量机SVM算法之理论篇1
一步步教你轻松学支持向量机SVM算法之理论篇1 (白宁超 2018年10月22日10:03:35) 摘要:支持向量机即SVM(Support Vector Machine) ,是一种监督学习算法,属于 ...
- 一步步教你搭建VS环境下用C#写WebDriver脚本
一步步教你搭建VS环境下用C#写WebDriver脚本http://www.automationqa.com/forum.php?mod=viewthread&tid=3529&fro ...
- 我写了个教程《一步步教你把ubuntu安装到U盘》
一步步教你把ubuntu安装到U盘 作者 Val 2452013147@qq.com 原因: 由于某些原因(学生党),需要把ubuntu安装到U盘到处走,百度了一下,教程都不是很好,要么很复杂,要么不 ...
- 10分钟 教你学会Linux/Unix下的vi文本编辑器
10分钟 教你学会Linux/Unix下的vi文本编辑器 vi编辑器是Unix/Linux系统管理员必须学会使用的编辑器.看了不少关于vi的资料,终于得到这个总结.不敢独享,和你们共享. 首先,记住v ...
- 一步步教你读懂NET中IL(附带图)
一步步教你读懂NET中IL(附带图) 接触NET也有1年左右的时间了,NET的内部实现对我产生了很大的吸引力,在msdn上找到一篇关于NET的IL代码的图解说明,写的挺不错的.个人觉得:能对这些底部的 ...
- 一步步教你轻松学奇异值分解SVD降维算法
一步步教你轻松学奇异值分解SVD降维算法 (白宁超 2018年10月24日09:04:56 ) 摘要:奇异值分解(singular value decomposition)是线性代数中一种重要的矩阵分 ...
- 一步步教你轻松学支持向量机SVM算法之案例篇2
一步步教你轻松学支持向量机SVM算法之案例篇2 (白宁超 2018年10月22日10:09:07) 摘要:支持向量机即SVM(Support Vector Machine) ,是一种监督学习算法,属于 ...
- 一步步教你轻松学主成分分析PCA降维算法
一步步教你轻松学主成分分析PCA降维算法 (白宁超 2018年10月22日10:14:18) 摘要:主成分分析(英语:Principal components analysis,PCA)是一种分析.简 ...
- 一步步教你轻松学关联规则Apriori算法
一步步教你轻松学关联规则Apriori算法 (白宁超 2018年10月22日09:51:05) 摘要:先验算法(Apriori Algorithm)是关联规则学习的经典算法之一,常常应用在商业等诸多领 ...
随机推荐
- M1905
11.09 11:00------102万 11.09 14:00---103万 11.12 16:00------103万 11.19 16:00---94万 11.20 ...
- 大话设计模式--状态模式 State -- C++实现实例
1.状态模式: 当一个对象的内在状态改变时,允许改变其行为,这个对象看起来就像是改变了其类. 状态模式解决的是当控制一个对象状态转换的条件表达式过于复杂, 把状态的判断逻辑转移到表示不同状态的一系列类 ...
- Spark- 数据清洗
输入输出转化工具类 package com.rz.mobile_tag.log import org.apache.spark.sql.Row import org.apache.spark.sql. ...
- 爬虫第一篇:爬虫详解之urllib.request模块
我将urllib.request 的GET请求和POST请求两种方法做了总结 GET请求 GET请求爬取: import urllib.request import urllib.parse head ...
- 理解VMware虚拟网络
简述:VMware虚拟网络概述.实现虚拟网络上网 Part0 子网掩码.DHCP.NAT,这些点请自行百度,百度百科讲的很清晰. Part1 转载:本文出自 "王春海的博客" 博客 ...
- svn_学习_01_TortoiseSVN使用教程
二.参考资料 1.TortoiseSVN新人使用指南 2.
- VS2019(Windows+Mac)编辑文件模板
macOS 找到设置中的如图条目 设置如下内容: ============================================================ Copyright (C) ...
- STL stl_alloc.h
# // Comment By: 凝霜 # // E-mail: mdl2009@vip.qq.com # // Blog: http://blog.csdn.net/mdl13412 # # // ...
- 【leetcode刷题笔记】Remove Duplicates from Sorted Array II
Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For exampl ...
- python suds 调用webservice 缓存
在linux系统中 如果webservice更新了字段 suds调用有可能缓存以前的字段或方法,对新的字段报找不到类型 TypeNotFound,或者对 新加的方法找不到该方法的错误. 当更新或添加w ...