PolymerとBrowserifyを一緒に使う

9278 ワード
browserify JavaScript Polymer JavaScript テキストリンク

どうも@laco0416です。PolymerとBrowserify一緒に使ってみました。

結論

vulcanize後のHTMLがやばい。

<gravatar-img>作った

とりあえず面白そうなのでGravatarのアイコンを表示するPolymerElementを作った。GravatarはemailのMD5をハッシュとしてURLに付与することでアイコンを取得できるらしいがそこらへんはパスしたいので今回はnode-gravatarというNode.js用のライブラリを使った。

PolymerからNode.jsを使えるようにする

当然そのままでは無理なのでBrowserifyを使う。とりあえずwindowに紐付けようと思ってエントリポイント的なJSを書いた。

js/gravatar.js
window.gravatar = require("gravatar");

これをbrowserifyでbuild/gravatar.jsにビルドする感じ。

gulpfile.ts
///<reference path="typings/gulp/gulp.d.ts"/>

import gulp = require("gulp");
var browserify = require("gulp-browserify");

gulp.task("build", () => {
  gulp.src("js/***")
  .pipe(browserify())
  .pipe(gulp.dest("build"))
});

gulp.task("default", ["build"]);

で、build/gravatar.jsをPolymerから呼ぶ

gravatar-img.html
<link rel="import" href="../polymer/polymer.html">

<dom-module id="gravatar-img">
  <template>
      <img src="{{ url }}">
  </template>
</dom-module>

<script src="build/gravatar.js"></script>
<script>

  Polymer({
    is: 'gravatar-img',

    properties: {
      email: {
        type:String
      }
    },

    ready: function() {
      this.url = ""
    },
    attached: function() {
      this.url = window.gravatar.url(this.email);
    }
  });
</script>

ちなみにすでにbowerにはgravatar-imgというパッケージがあって、まったく同じ機能のPolymerElementが配布してあった。それはgravatarのAPIのあたりも全部自前で書いてるっぽくてすごいなと思った。(地味にMD5のあたり面倒だと思う)

これで動くようになる。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
  <link rel="import" href="bower_components/gravatar-img/gravatar-img.html"/>
</head>
<body>
  <gravatar-img email="[email protected]"></gravatar-img>
</body>
</html>

楽しい。

vulcanizeしてみる

このindex.htmlをvulcanizeしてみる。

> vulcanize --inline-scripts index.html > build.html

出来上がるbuild.htmlがこちら

WebStormの行番号のところ(ガターと呼ぶのだけど)が壊れてるあたりで察してほしい。

> ls -l
-rw-r--r--  1 laco  staff  332577 Aug 19 01:31 build.html
-rw-r--r--  1 laco  staff     330 Aug 19 01:28 index.html

まあNodeのcryptoとかbufferとか取り込んでるしPolymer自体も取り込んでるから仕方ない。
JavaScriptのXHRは認めてHTMLインポートだけどマージするとこうなる。

> vulcanize index.html > build.html

ガターが直った。

> ls -l
-rw-r--r--  1 laco  staff  157196 Aug 19 01:36 build.html
-rw-r--r--  1 laco  staff     330 Aug 19 01:28 index.html

だいたい半分になった。

まとめ

BrowserifyされたJSでもPolymerで何の問題もなく動いたのでNode.jsのパッケージ使ったPolymerElements作っていこうかなとちょっとモチベが上がった。
しかしPolymerとBrowserify組み合わせてHTMLとJSどっちもvulcanizeするとだいぶでかくなるのでモバイル向けとかで使うときは少し気にしたほうがいいかもしれない。300KBくらいならまあええんちゃう？って感じだけど。