zoukankan      html  css  js  c++  java
  • Browserify: 使nodejs模块可以在浏览器下使用

    Browserify:浏览器加载Node.js模块
    --------------------------------------------------
    随着JavaScript程序逐渐模块化,在ECMAScript 6推出官方的模块处理方案之前,有两种方案在实践中广泛采用:一种是AMD模块规范,针对模块的异步加载,主要用于浏览器端;另一种是CommonJS规范,针对模块的同步加载,主要用于服务器端,即node.js环境。

    Browserify是一个node.js模块,主要用于改写现有的CommonJS模块,使得浏览器端也可以使用这些模块。使用下面的命令,在全局环境下安装Browserify。

    npm install -g browserify

    browserify -h //查看帮助信息
    browserify --help advanced

    example:
    ------------
    //foo.js:
    module.exports = function(x){ console.log(x) }

    //main.js:
    var foo = require('./foo');
    foo('hello, browserify~~');

    command-line input:
    browserify main.js > compiled.js //合并foo.js和main.js并可以用于浏览器环境的js
    等价命令
    browserify main > compiled.js
    browserify main.js -o compiled.js
    html中<script>标签引入 <script src="compiled.js"> </script>

    example:
    ------------
    我们再看一个在服务器端的backbone模块转为客户端backbone模块的例子。

    先安装backbone和它所依赖的jQuery模块。

    npm install backbone jquery //一次安装2个库?
    然后,新建一个main.js文件。
    // main.js

    var Backbone = require('backbone');
    var $ = Backbone.$ = require('jquery/dist/jquery')(window);

    var AppView = Backbone.View.extend({
    render: function(){
    $('main').append('<h1>Browserify is a great tool.</h1>');
    }
    });

    var appView = new AppView();
    appView.render();
    接着,使用browserify将main.js转为app.js。

    browserify main.js -o app.js
    app.js就可以直接插入HTML网页了。

    <script src="app.js"></script>
    注意,只要插入app.js一个文件就可以了,完全不需要再加载backbone.js和jQuery了。

    > 生成模块
    有时,我们只是希望将node.js的模块,移植到浏览器,使得浏览器端可以调用。这时,可以采用browserify的-r参数(--require的简写)。

    browserify -r through -r ./my-file.js:my-module > bundle.js
    上面代码将through和my-file.js(后面的冒号表示指定模块名为my-module)都做成了模块,可以在其他script标签中调用。

    <script src="bundle.js"></script>
    <script>
    var through = require('through');
    var myModule = require('my-module');
    /* ... */
    </script>
    可以看到,-r参数的另一个作用,就是为浏览器端提供require方法。

  • 相关阅读:
    自定义组件要加@click方法
    绑定样式
    647. Palindromic Substrings
    215. Kth Largest Element in an Array
    448. Find All Numbers Disappeared in an Array
    287. Find the Duplicate Number
    283. Move Zeroes
    234. Palindrome Linked List
    202. Happy Number
    217. Contains Duplicate
  • 原文地址:https://www.cnblogs.com/stephenykk/p/4090433.html
Copyright © 2011-2022 走看看