zoukankan      html  css  js  c++  java
  • Browserify CommonJs

    *

    参考文章:Browserify:浏览器加载Node.js模块

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

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

     htmlbuilder使用的是commonJs规范,使用browserify打包,使用jake.js作为build tool??

    1,安装browserify

    $ npm install -g browserify

    *

    C:UsersJoyce>browserify -v
    (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({},{},[]);

    C:UsersJoyce>

    在htmlbuilder中,最终打完包的build.js是这样的


    (这一块同上.....)({

    1:[],2:[],...,15:[]

    },{},[1]);

    *******************

    browserify基本例子

    //foo.js

    // foo.js
    
    module.exports = function(x) {
      console.log(x);
    };

    //main.js

    // main.js
    
    var foo = require("./foo");
    foo("h1");

    使用browserify编译,cmd到main.js的目录下,输入

    browserify main.js > compiled.js
    # 或者
    browserify main > compiled.js
    # 或者
    browserify main.js -o compiled.js
    生成的compiled.js
    (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
    //foo.js
    module.exports=function(x){
        
        console.log(x);
    };
    },{}],2:[function(require,module,exports){
    var foo=require("./foo");
    foo("h1");
    },{"./foo":1}]},{},[2]);
    View Code

    写一个html,引入compiled.js

     <script src="compiled.js"></script>

    浏览器中会输出h1

    *

    有问题在公众号【清汤袭人】找我,时常冒出各种傻问题,然一通百通,其乐无穷,一起探讨


  • 相关阅读:
    lintcode-453-将二叉树拆成链表
    qcow2虚拟磁盘映像转化为vmdk
    wiki
    oracle
    mysql配置记录
    consul命令记录
    Prometheus监控elasticsearch集群(以elasticsearch-6.4.2版本为例)
    centos7修改网卡名称为eth0
    linux下将普通用户加入到docker组,使它可以运行docker命令
    CentOS配置history记录每个用户执行过的命令
  • 原文地址:https://www.cnblogs.com/qingmaple/p/6077658.html
Copyright © 2011-2022 走看看