2018年5月2日水曜日

browserify 超入門

概要

とりあえず挙動をするのか確認するために試してみました
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 を開いてコンソールを確認すると
browserify1.png

と表示されます
これだけだと正直「お、おう」という感じなので 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 などが絡むと更にいろいろと処理が必要になりそうです

参考サイト

時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)