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:

  • 相关阅读:
    Python语法解析器PLY——lex and yacc in Python
    spider-lang :爬虫语言,专为网络爬虫设计
    使用ANTLR做一个简单的Python SQL语法解析器
    使用Antlr实现简单的DSL
    Wrights Notes
    20个人团建能干些什么?
    zz
    贾跃亭反思乐视节奏过快_公司频道_财新网
    西湖人才网 职称考评
    安能物流
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4156255.html
Copyright © 2011-2022 走看看