Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

ちょっと前になりますが4/1にcomponentの1.0.0-rc1がリリースされました。

今はrc5みたいです、久しぶりにcomponentを触ってみて、ビルドのコマンドが以前より便利になっているようなのでまとめてみます。

サンプルのソースは以下にあります:

https://bitbucket.org/p_baleine/component-1.0.0-build-sample

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.jsonjsonという名前のプロパティで記載するとrequireできます。

  "json": [
    "data.json"
  ]

テンプレート

以前はテンプレート用のHTMLを作成してこれに対しcomponent convertを実行してJSファイルを生成して、これを利用する必要がありましたが、今はビルドコマンドが組み込みで変換処理をもってくれています。component.jsontemplatesに記載して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としての理想もあるけれど、より便利な方に向かっているように思えました。

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away