一步步教你学会browserify
2015-12-28 14:44
761 查看
注意
文章需要边看边练习,不然你可能忘得速度比看的还快。
原文地址: http://my.oschina.net/goskyblue/blog/552284
比如在html中引用外部资源的时候,原来我们可能这样写
但是有了 browserify 的帮助,就可以把这些通通压缩成一句
而且不用担心,jQuery或者underscore等等库的冲突问题。
虽然这项技术也是最近几年才流行起来的,但是它迅速的在前端领域流行了起来。另一个跟browserify比较类似的是
借助browserify你可以使用nodejs中常用到的
先创建一个hello.js文件,内容如下
然后在创建一个entry.js文件,内容
最后使用browserify进行进行打包
然后
写一个简单的
然后用浏览器打开该文件,
这就是最简单的打包应用了。
接着安装jquery库
其中
修改下我们之前创建的
查看效果
这时打开index.html,你会看到页面上有字了,出现了
这样子做的好处有很多,即使这个页面你又引用了别的jquery也不会和
gulp的配置文件是
之后安装下依赖库
当前目录下启动gulp,效果就是每次你修改了js文件,都会调用browserify打包一次。
是不是很酷炫。
首先还是安装
之后需要稍微修改下
原来这个样子
增加几行代码,需要改造成这样. 第一行的require可以放到最上面。
为了验证效果。我们添加一个文件
内容简单的写下
接着修改下
重新打包,并再次刷新index.html 那个网页,就可以看到加粗的Hello,以及变蓝的World了。
jshint相比较jslint配置少了不少,不过依然很多,闲麻烦的话,可以直接用我的。 下面的内容直接保存为文件
之后修改
然后安装几个新增的依赖
重新运行
文章需要边看边练习,不然你可能忘得速度比看的还快。
原文地址: 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 gulp npm 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可以单独作为一篇文章了。哈哈,先这样了。相关文章推荐
- 使用Browserify配合jQuery进行编程的超级指南
- ES6 编译 ES5 环境搭建
- gulp项目构建小结
- ReactJS+es6+gulp+browserify开发环境搭建
- Typescript学习之基于gulp+browserify+browser-sync等搭建自动化开发环境
- 使用 ES6 进行开发
- 浅谈JavaScript模块:Bundling
- 前端内容的自动化构建——gulp学习笔记
- browserify出现ParseError: Unexpected character '�'
- gulp+bower体系如何使用browserify调用npm模块
- Browserify入门
- gulp的安装和使用
- Gulp/seajs /require/browserify / webpack 简单区分
- browserify总结
- browserify-transform的写法
- browserify打包后的运行规则策略
- 使用Browserify来实现CommonJS的浏览器加载方法
- 一个后端er想进前端娱乐圈
- vue学习
- 总结_____大二上