component buildの構成

npmモジュールの名前がややこしいのですが、以下のような依存関係があります。

component
  -> component-build
    -> builder2.js

component buildは実際にはcomponent/bin/component-buildを実行しますが、このスクリプトが直接依存しているのがcomponent-build、その先にbuilder2.jsがいます。間にcomponent-buildを挟んでいるのは、個々のプロジェクトにカスタマイズされたビルドをしたい場合はこれをフォークして好きなように弄ってくれという意味みたいです。

で、component-buildに記載がある通り、特にカスタマイズせずともcomponent buildで以下の機能がサポートされています:

Scripts
- ES6モジュールサポート
- 文法エラーチェック
- JSONファイルとJSONの文法エラーチェック
- テンプレート
- デフォルトでbundleの自動require
- オプションでUMD wrap
- bundleのentry pointを自動で解決
Syles
- 自動でCSSのベンダプレフィックス付与
- 任意のプレフィックスでCSSのurlを書き換え
Files
- ファイルのコピーまたはsymlinkを選択

この内面白そうで試せたものについて記載します。

es6-moduleのサポート

jsファイルをes6-moduleの文法で記述すると、es6-moduleをサポートしていないブラウザでも動くようにコンパイルしてくれます(lib/sample/index.js):

import data from "./data";
import templateHtml from "./template";
import _ from "underscore";

var template = _.template(templateHtml);

export default = function render(el) {
  if (typeof el !== "string") { throw new TypeError; }
  document.querySelector(el).innerHTML = _(data).map(function(datum) {
    return template(datum);
  }).join('');
};

component.jsonに特別な指定はいらないようです。

JSONファイル

以前はsegmentio のプラグインで実現できたjsonファイルのrequireですが、組み込みになったようです。component.jsonにjsonという名前のプロパティで記載するとrequireできます。

  "json": [
    "data.json"
  ]

テンプレート

以前はテンプレート用のHTMLを作成してこれに対しcomponent convertを実行してJSファイルを生成して、これを利用する必要がありましたが、今はビルドコマンドが組み込みで変換処理をもってくれています。component.jsonのtemplatesに記載してrequireするとhtmlに記載した内容が文字列として得られます。

  "templates": [
    "template.html"
  ]

CSSのベンダプレフィックスの書き換え

これ便利ですね、何も考えずにCSSファイルにベンダプレフィックスを必要とするスタイルを記述すると、勝手にプレフィックスつけてくれました(lib/sample/sample.css)。

/* ... */

#list {
  transform: rotate(-10deg);
}

/* ... */

ビルドされたCSS:

/* ... */

#list {
  -webkit-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

/* ... */

デフォルトでbundleの自動require

なに言っているんだかわかりにくいですが、例えばサンプルのアプリはローカルコンポーネント(lib/sample)を含むそれ自身がcomponent-1.0.0-build-sampleという名前のコンポーネントとして構成されています。で、以前はトップのhtmlの方で以下のように明示的にcomponent-1.0.0-build-sampleをrequireするようなコードを記述してアプリを起動していました

<body>
  <!-- ... -->
  <script src="build/build.js" type="text/javascript"></script>
  <script>
    ;(function() {
      require('component-1.0.0-build-sample')
    }());
  </script>
</body>

でも最新のcomponent buildでは生成されたbuild.jsの一番下のほうでrequire("component-1.0.0-build-sample")してくれているので、上記HTMLでいうところの2つ目のscriptタグがまるごといらなくなります。

watch

ビルド時に--watchオプションをつけるとファイルの変更を監視して勝手にビルドしてくれます:

$ component build --watch

…これいつからあったんだろうなぁ、前はgruntのComponent向けプラグインとかで実現してたけど、component自身がサポートしてくれたみたいです。

終わりに

ちゃんと追っかけていなかったのでいつからこういう体制になったのかわからないんですが、最近は明確にjonathanongがメンテナになったみたいで、1.0-rc1のリリースも彼のツイートで知りました。

個人的に、このビルドコマンド周りの改善とかは、componentとしての理想もあるけれど、より便利な方に向かっているように思えました。

新(?)機能を全部試せていないので、他のもそのうち見てみます。

component 1.0.0のビルドコマンドを試してみた