browserifyでHello worldする

browserifyは、ブラウザ上でnpmのモジュールを利用できて、依存関係も解決してくれるツール。

とりあえず、トップにあるHello World With Browserifyを試してみる。

% mkdir b
% cd b 
% npm init
% npm install browserify uniq --save

browserifyするjsを作成する

var unique = require('uniq');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

console.log(unique(data));

パスを通していないので相対パスでbrowserifyを実行。
実際運用時は、gulpなんかで実行する事になると思われる。

% node_modules/.bin/browserify main.js -o bundle.js
% ls -la
total 24
drwxr-xr-x   6 kobachi  staff   204  6 12 06:52 .
drwxr-xr-x  17 kobachi  staff   578  6 11 13:27 ..
-rw-r--r--   1 kobachi  staff  1559  6 11 20:20 bundle.js
-rw-r--r--   1 kobachi  staff    99  6 11 13:31 main.js
drwxr-xr-x   5 kobachi  staff   170  6 11 13:32 node_modules
-rw-r--r--   1 kobachi  staff   273  6 11 13:32 package.json

生成されたbundle.jsの中身を見てみる。

% vim bundle.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){
var unique = require('uniq');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

console.log(unique(data));

},{"uniq":2}],2:[function(require,module,exports){
"use strict"

function unique_pred(list, compare) {
  var ptr = 1
    , len = list.length
    , a=list[0], b=list[0]
  for(var i=1; i < len; ++i) {
    b = a
    a = list[i]
    if(compare(a, b)) {
      if(i === ptr) {
        ptr++
        continue
      }
      list[ptr++] = a
    }
  }
  list.length = ptr
  return list
}

function unique_eq(list) {
  var ptr = 1
    , len = list.length
    , a=list[0], b = list[0]
  for(var i=1; i < len; ++i, b=a) {
    b = a
    a = list[i]
    if(a !== b) {
      if(i === ptr) {
        ptr++
        continue
      }
      list[ptr++] = a
    }
  }
  list.length = ptr
  return list
}

function unique(list, compare, sorted) {
  if(list.length === 0) {
    return list
  }
  if(compare) {
    if(!sorted) {
      list.sort(compare)
    }
    return unique_pred(list, compare)
  }
  if(!sorted) {
    list.sort()
  }
  return unique_eq(list)
}

module.exports = unique

},{}]},{},[1]);

モジュールを実行するためのコードが追加されている。

実行してみる。

% node bundle.js
[ 1, 2, 3, 4, 5, 6 ]

htmlで読み込んで実行してみる

< html>
  < body>
    < script src="bundle.js">< /script>
  < /body>
< /html>

スクリーンショット 2016-06-13 7.34.30

console.logされた。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク