日頃の行い

個人的な日頃の行いをつらつら書いてます＼＼\\ ٩( 'ω' )و //／／

component jsを試してみた。

JavaScript

component.jsをやってみようと思ってgithubに行ったら
getting startedがあったのでやってみました。

レポジトリ
component/component · GitHub

Getting Started
guide/component/getting-started.md at master · component/guide · GitHub

流れ

  1. npmでinstall
  2. index.html,css,jsの記述
  3. component.jsonの記述
  4. component buildの実行

って感じです。

Installing Component

まずはインストールしましょう。
npm installで一発です。
注意としてバージョン指定しないと後のbuildでdependenciesを含んだ時に動きませんでした←

npm install -g component

こいつでやったら後のcomponent buildで

error : failed to lookup "getting-started-with-component"'s dependency "necolas-normalize.css"

というエラーを吐きつつ失敗したので、

npm install -g component@1.0.0-rc5

にしました。

Create index.html, index.css, index.js

index.html, index.css, index.jsを作ろうと言われたので
書いてあるとおりに作ってみようと思います。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Getting Started with Component</title>
    <link rel="stylesheet" href="build/build.css">
  </head>
  <body>
    <h1>Getting Started with Component</h1>
    <p class="blink">Woo!</p>
    <script src="build/build.js"></script>
  </body>
</html>

index.css

* {
  box-sizing: border-box;
}

index.js

var blink = document.querySelector('.blink');

setInterval(function () {
  blink.style.visibility = getComputedStyle(blink).visibility === 'hidden'
    ? 'visible'
    : 'hidden';
}, 300);

そしてこいつらについての記述をcomponent.jsonに書けと言われました。

component.jsonの記述

{
  "name": "getting-started-with-component",
  "dependencies": {
    "necolas/normalize.css": "^3.0.0"
  },
  "scripts": ["index.js"],
  "styles": ["index.css"]
}

結果ファイル構成はこんな感じです。

tree
.
├── component.json
├── index.css
├── index.html
└── index.js

0 directories, 4 files

component buildの実行

component build

をやってみましょう
こんなふうになりました。

tree

.
├── build
│   ├── build.css
│   └── build.js
├── component.json
├── components
│   └── necolas
│       └── normalize.css
│           └── 3.0.1
│               ├── component.json
│               └── normalize.css
├── index.css
├── index.html
└── index.js

5 directories, 8 files

You'll see build/build.js and build/build.css files as referenced by index.html.

buildしたら、index.html内で参照されていたbuild.cssたちが作成されましたね。

index.htmlを開くと点滅するwoo!の文字が・・・！
これはindex.jsに書いていた記述ですね。

自動生成されたbuild/build.jsを見てみましょう

/**
 * Define a module's exports immediately with `exports`.
 *
 * @param {String} name
 * @param {Generic} exports
 * @api private
 */

require.define = function (name, exports) {
  require.modules[name] = {
    exports: exports
  };
};
require.register("getting-started-with-component", function (exports, module) {
var blink = document.querySelector('.blink');

setInterval(function () {
    blink.style.visibility = getComputedStyle(blink).visibility === 'hidden'
    ? 'visible'
    : 'hidden';
}, 300);

});

require("getting-started-with-component")

みたいな感じに書かれていますね。
ここに自分の書いたコード（index.js）が記述されているようです。

ついでにbuild/build.cssも見てみると上の方にこんな記述がありますね。

*! normalize.css v3.0.1 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}
・・・

normarize.cssの内容が記述されています。
( 参考：components/necolas/normalize.css/3.0.1/normalize.css に同じ記述があります。)

下の方に行くとindex.cssの内容も書かれていました。

434     box-sizing: border-box;

みたいな。

ページごとに必要となる（依存性のあるscriptやらも同時に含めつつ）
scriptやcssをまとめて一つに（component化）出来る感じですかね。

ちょっとおもしろそうですが、僕にはvue.jsが待っているので←
まずはそっちをやってみようかなと思いました＼(^o^)／ｗ
まだcomponent.jsを使うような時間ではない・・・←