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方法。

  • 相关阅读:
    H5系列之drag拖放
    H5系列之contenteditable
    H5系列之新input
    利用css3和js实现旋转木马图片小demo
    利用css3实现照片列表展开小demo
    reduce()、filter()、map()、some()、every()、...展开属性
    ES6,ES7,ES8,ES9,ES10新特性
    Web Components 是什么?它为什么对我们这么重要?
    vscode常用快捷键以及插件
    使用for..in时会遍历对象原型中的自定义属性
  • 原文地址:https://www.cnblogs.com/stephenykk/p/4090433.html
Copyright © 2011-2022 走看看