zoukankan      html  css  js  c++  java
  • [Node.js] Broswerify -- 1

    Browserify is a tool that brings node.js style development to the browser.

    The thing you can see on the node.js cmd line can also be broung up to the broswer.

    What you need to do is:

    Install the browserify:

    npm install -g browserify

    Now, for example, you have two javascript file:

    entry.js:

    /**
     * Created by Answer1215 on 12/10/2014.
     */
    var test = require('./test');
    
    console.log(test);

    test.js:

    /**
     * Created by Answer1215 on 12/10/2014.
     */
    module.exports = ['foo', 'bar', 'tool'];

    When you run in the commond line: npm entry.js

    you will get the result:

    C:UsersAnswer1215WebstormProjectsangularcommonJSBroswerfiy>node entry
    [ 'foo', 'bar', 'tool' ]

    But if you run browserfiy:

    browserfiy entry.js -o bundle.js

    It will create a new file which called bundle.js which minfiy the code, it looks like:

    (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){
    /**
     * Created by Answer1215 on 12/10/2014.
     */
    var test = require('./test');
    
    console.log(test);
    },{"./test":2}],2:[function(require,module,exports){
    /**
     * Created by Answer1215 on 12/10/2014.
     */
    module.exports = ['foo', 'bar', 'tool'];
    },{}]},{},[1]);

     Then you can create an html file whcih inclide the bundle.js:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script src="bundle.js"></script>
    </body>
    </html>

    Check in the broswer:

  • 相关阅读:
    listView控件演示程序
    猪悟能淘宝商品下载专家v3版开发手记
    c# WebClient类
    分隔控件splitter演示程序
    C#中SESSIONID的获取
    工具栏toolBar演示程序
    Cookie总结
    C#获取网页源码并且自动判断网页字符集编码
    如何在Google Code上建立私有代码版本库
    iOS应用程序生命周期(前后台切换,应用的各种状态)详解
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4156255.html
Copyright © 2011-2022 走看看