2018年5月2日水曜日

browserify 超入門

概要
環境
browserify インストール
公式の Getting Started をやる
jQuery を追加する
CSS も追加してみる
最後に
参考サイト

概要

とりあえず挙動をするのか確認するために試してみました
jQuery を使って簡単な UI の作成までやっています

環境

macOS 10.13.4
nodejs 8.7.0
browserify 16.2.0

browserify インストール

npm install -g browserify

これで browserify コマンドが使えるようになります

公式の Getting Started をやる

素直に公式のチュートリアルをやってみましょう

vim main.js

var unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(unique(data));

npm install uniq --save
browserify main.js -o bundle.js
vim index.html

<html>
  <head>
    <script src="./bundle.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

で index.html を開いてコンソールを確認すると

と表示されます
これだけだと正直「お、おう」という感じなので HTML の制御もしてみます

jQuery を追加する

npm install jquery --save
vim main.js

var unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(unique(data));

var $ = require('jquery');
$(function() {
  $("#ret").text(data);
});

id="ret" のタグに表示するようにします

vim index.html

<html>
  <head>
    <script src="./bundle.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="ret"></div>
  </body>
</html>

HTML 側も修正して再度 browserify すると先ほどはコンソールだけでしたがブラウザ上に 1,2,3,4,5,6 と表示されると思います

CSS も追加してみる

bulma を追加してみます
正直やり方がこれで良いのかさっぱりですがとりあえずできたので紹介します

npm install bulma --save
npm install browserify-css --save

必要なパッケージがインストールできたら CSS ファイルを作成します

vim main.css

@import url("node_modules/bulma/css/bulma.min.css");

そしてこれを main.js 側で require します
先頭に追記しています

vim main.js

require('./main.css');

var unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(unique(data));

var $ = require('jquery');
$(function() {
  $("#ret").text(data);
});

あとは broserify するだけですが -t オプションを使って browserify-css を指定します

browserify -t browserify-css main.js -o bundle.js

これで再度 index.html を開くと div タグに bulma が適用されていると思います
わかりやすいように div タグに class="title" を入れると良いと思います

<div class="title" id="ret"></div>

最後に

browserify に入門してみました
かなり入門なので実際にサイトなど作ってみないと具体的な恩地がどれくらいあるか判断するのは難しいかなと思います
とりあえず npm でインストールしたモジュールを使って nodejs でフロントサイドの .js ファイルが作成できるツールということはわかりました

nodejs でサーバサイドも書いていてついでに UI も書こうという場合に使えるのかもしれません
確かに UI を書く時に jQuery などは CDN などを参照して HTML に書くのですが、それが npm install で済むようになるのは嬉しいと思います

あといろいろ調べると sass や ECMAScript などが絡むと更にいろいろと処理が必要になりそうです

参考サイト

https://github.com/cheton/browserify-css

hawksnowlog