Browserify 前端静态资源打包工具

  • Z时代
  • 2024-01-10
  • 分类：IT

Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。

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中的库

  1. 先创建一个 package.json 文件，内容最简单的写下。

     {
         "name": "study_browserify"
     }

  2. 接着安装jquery库

     npm i --save jquery

    其中–save的意思是将jquery信息保存到package.json文件中。

  3. 修改下我们之前创建的hello.js文件成

     module.exports = function(){     var $ = require('jquery')
         $(function(){
             $("body").html("Hello world, jquery version: " + $.fn.jquery);
         })
     };

  4. entry.js文件也要稍微修改下

     var hello = require('./hello.js')
     hello()

  5. 查看效果这时打开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

内容简单的写下

<span>Hello</span>
<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 文件改的错一点。你就会发现编辑器开始提示你错误了，修改后就能编译成功了。

以上是 Browserify 前端静态资源打包工具 的全部内容， 来源链接： utcz.com/p/232397.html

回到顶部