本文来自网易云社区

作者：孙圣翔

注意

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

原文地址： 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相关推荐

【browserify】一步步教你学会browserify
https://www.cnblogs.com/fsg6/p/13139627.html Browserify browserify的官网是http://browserify.org/,他的用途是将前 ...
mysql插入栏位语句_情人节福利，手把手教你学会mysql语句操作
情人节福利,手把手教你学会mysql语句操作一起来日常学python 进入正题 mysql语句分为两种,一种是DDL,就是数据定义语句,比如那些CREATE,ALTER.另一种是DML,就是数据管 ...
一步步教你轻松学朴素贝叶斯模型算法理论篇1
一步步教你轻松学朴素贝叶斯模型理论篇1 (白宁超2018年9月3日17:51:32) 导读:朴素贝叶斯模型是机器学习常用的模型算法之一,其在文本分类方面简单易行,且取得不错的分类效果.所以很受欢迎,对 ...
DeepMind新语言模型SUNDAE：教自动编码器学会「自我纠正」，WMT14英德互译任务获SOTA...
丰色发自凹非寺量子位报道 | 公众号 QbitAI 一直以来,自回归语言模型(Autoregressive model,AR)在文本生成任务中表现都相当出色. 现在,DeepMind通过教自动 ...
[翻译]一步步教你配置SQL SERVER合并复制（五）配置Publisher（上）
上一篇:一步步教你配置 SQL SERVER合并复制(四)设置Distributor的安全 (译者注:本篇内容较多也是合并复制最重要的一个环节之一,因此配置Publisher将分成两个章节来翻译) ...
机器学习：一步步教你理解反向传播方法
机器学习:一步步教你理解反向传播方法时间 2016-09-13 00:35:59 Yong Yuan's blog 原文 http://yongyuan.name/blog/back-propa ...
[翻译]一步步教你配置SQL SERVER合并复制（四）提高Distributor的安全性
上一篇:一步步教你配置SQL SERVER合并复制(三)配置Distributor 为了让已订阅数据库的设备能够更好地去联系Distributor,你必须在数据库中添加一个域用户,让设备能够通过这个用 ...
一步步教你在以太坊发行自己的数字货币
一步步教你在以太坊发行自己的数字货币置顶 2018年03月21日 15:31:04 阅读数:1239 什么是代币如果不那么追求精确的定义,代币就是数字货币,比特币.以太币就是一个代币. 利用以太坊 ...
一步步教你Hadoop多节点集群安装配置
一步步教你Hadoop多节点集群安装配置 1.集群部署介绍 1.1 Hadoop简介 Hadoop是Apache软件基金会旗下的一个开源分布式计算平台.以Hadoop分布式文件系统HDFS(Hado ...

一步步教你学会browserify