zoukankan      html  css  js  c++  java
  • 一步步教你学会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中的库

    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

    内容简单的写下

    <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+款云产品! 

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


    相关文章:
    【推荐】 GitLab 自动触发 Jenkins 构建(2)
    【推荐】 Android输入法弹出时覆盖输入框问题
    【推荐】 移动端爬虫工具与方法介绍

  • 相关阅读:
    在图片上面添加字体
    wampserver php 识别不了>或者尖括号 php.ini中short_open_tag设置方法
    [P5162] WD与积木
    [P5170] 类欧几里得算法
    [P5172] Sum
    [HEOI2014] 大工程
    [P4721] 分治 FFT
    [BJOI2017] 树的难题
    [P4886] 快递员
    [CERC2014] Virus synthesis
  • 原文地址:https://www.cnblogs.com/163yun/p/9706325.html
Copyright © 2011-2022 走看看