本文来自网易云社区

作者：孙圣翔

注意

文章需要边看边练习，不然你可能忘得速度比看的还快。

原文地址： 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+款云产品！

更多网易研发、产品、运营经验分享请访问网易云社区。

一步步教你学会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)是关联规则学习的经典算法之一,常常应用在商业等诸多领 ...

随机推荐

org.eclipse.core.resources.bak文件导致MyEclipse每次关闭时无法保存文件
MyEclipse关闭时提示如下信息 Problems occurred while trying to save the state of the workbench. Internal Error ...
四分位数及matlab实现
四分位数(quantile),解释及调用形式如下. quantile(x,y,z)的三个参数的说明如下:x表示要求的矩阵或者向量:y的取值为表示要求的分位数,如四分之一中位数0.25,四分之三中位数0 ...
zookeeper+dubbo问题
1.java.lang.IllegalStateException: Context namespace element 'component-scan' and its parser class [ ...
diea破解
选择菜单Help->Register->License server,填上http://idea.iteblog.com/key.php,如图所示: 点击Activate,然后就搞定了.
bzoj 4822~4824 CQOI2017题解
老C的任务题目大意: 维护一个二维平面,初始给出一些点及其权.多次询问某个矩形内的权和. n,m <= 100000 题解: 签到题. CDQ水一水. #include <cstdio& ...
bzoj 4817: [Sdoi2017]树点涂色 LCT+树链剖分+线段树
题目: Bob有一棵n个点的有根树,其中1号点是根节点.Bob在每个点上涂了颜色,并且每个点上的颜色不同. 定义一条路径的权值是:这条路径上的点(包括起点和终点)共有多少种不同的颜色. Bob可能会进 ...
白话算法(6) 散列表(Hash Table) 从理论到实用（下）
[澈丹,我想要个钻戒.][小北,等等吧,等我再修行两年,你把我烧了,舍利子比钻戒值钱.] ——自扯自蛋无论开发一个程序还是谈一场恋爱,都差不多要经历这么4个阶段: 1)从零开始.没有束缚的轻松感.似 ...
VijosP1274:神秘的咒语
描述身为拜月教的高级间谍,你的任务总是逼迫你出生入死.比如这一次,拜月教主就派你跟踪赵灵儿一行,潜入试炼窟底. 据说试炼窟底藏着五行法术的最高法术:风神,雷神,雪妖,火神,山神的咒语.为了习得这些法 ...
【转】 Pro Android学习笔记（三五）：Menu（6）：XML方式 & PopUp菜单
目录(?)[-] 利用XML创建菜单 XML的有关属性 onClick事件 Pop-up菜单利用XML创建菜单在代码中对每个菜单项进行设置,繁琐且修改不灵活,不能适配多国语言的要求,可以利用资源进 ...
Java常见设计模式之单例模式
1.何为单例模式? 单例模式是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例类的特殊类.通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的 ...

一步步教你学会browserify