component.js
component.jsはnpmやbowerを使った依存する外部ライブラリ（JavaScript,CSSともを含む）の解決と、
unglifyやcssminで行う自作ファイルを適切に組み合わせるビルドを1つのツールでやってしまおうとする
意欲的なツールです。
Getting Started
使用感はGetting Startedを眺めてもらうのが
分かりやすいです*1。
流れ
component jsを試してみた。 - 日頃の行いと大体一緒です。
たまたまバグを踏んだので、その部分を補足します。
- npmでinstall
- githubの設定
- index.html,css,jsとcomponent.jsonの記述
- component buildの実行
install
npm install -g component@1.0.0-rc5
1.0.0はstableではありません。バージョンを指定しないと0.19.9が入ります。
結構大きいです。
component1.0.0はgithub APIを使って依存ライブラリを取得します。
github APIの設定が必要です。
https://github.com/settings/applications#personal-access-tokens にてアクセストークンを作成します。
権限はrepoとuserだけで動きました。もっと減らせるかもしれません。
アクセストークンの動作確認
curl -u <token>:x-oauth-basic https://api.github.com/user
.netrcにトークンを追記
machine api.github.com
login <token>
password x-oauth-basic
ファイルを準備
index.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.js
var blink = document.querySelector('.blink');
setInterval(function () {
blink.style.visibility = getComputedStyle(blink).visibility === 'hidden'
? 'visible'
: 'hidden';
}, 30
index.css
* {
box-sizing: border-box;
}
component.json
{
"name": "getting-started-with-component",
"dependencies": {
"necolas/normalize.css": "^3.0.0"
},
"scripts": ["index.js"],
"styles": ["index.css"]
}
実行
component buildコマンドで依存ライブラリの取得とビルドが走るはずですが・・・
component build
installed : necolas/normalize.css@3.0.1 in 1148ms
build : resolved in 4903ms
build : files in 7ms
build : build/build.js in 9ms - 1kb
error : Cannot call method 'process' of undefined
期待しないエラーが表示されます*2。
しかしエラーの詳細が分かりません。
こういう場合は、component guideにあたります。
Trouble shooting
に従いDEBUG変数を指定して再度実行します。
DEBUG=component* component build
component-resolver remote not set - defaulting to remotes's defaults +0ms
component-resolver:locals resolving local at "/Users/ledsun/SandBox/JavaScript/component" +6ms
component-resolver resolving "getting-started-with-component" +4ms
component-resolver remaining dependencies: 1 +4ms
component-resolver remaining semver: 0 +0ms
component-resolver finished resolving locals +0ms
component-resolver finished resolving dependencies (1) +0ms
component-resolver:semver resolving semver necolas/normalize.css@^3.0.0 +1ms
component-resolver:dependencies resolving dependency necolas/normalize.css@3.0.1 +2ms
component-resolver:dependencies searching ["local","github","bitbucket"] for necolas/normalize.css@3.0.1 +1ms
component-resolver:dependencies found necolas/normalize.css@3.0.1 from remote "local" +1ms
component-resolver resolving "necolas/normalize.css" +0ms
component-resolver remaining dependencies: 0 +0ms
component-resolver remaining semver: 1 +1ms
component-resolver:semver resolved semver necolas/normalize.css@^3.0.0 -> necolas/normalize.css@3.0.1 +0ms
component-resolver finished resolving semver +0ms
component-resolver finished resolving dependencies(2) +1ms
component-downloader "/Users/shigerunakajima/SandBox/JavaScript/component/components/necolas/normalize.css/3.0.1" exists, skipping downloading. +0ms
component-resolver finished installing dependencies +0ms
build : resolved in 22ms
build : files in 6ms
build : build/build.js in 9ms - 1kb
component-consoler TypeError: Cannot call method 'process' of undefined
at /usr/local/lib/node_modules/component/node_modules/component-build/node_modules/builder-autoprefixer/index.js:21:49
at Object.read (/usr/local/lib/node_modules/component/node_modules/component-build/node_modules/component-builder/node_modules/component-manifest/build/index.js:436:49)
at Styles.autoprefixer (/usr/local/lib/node_modules/component/node_modules/component-build/node_modules/builder-autoprefixer/index.js:16:10)
at next (/usr/local/lib/node_modules/component/node_modules/co/index.js:99:21)
at /usr/local/lib/node_modules/component/node_modules/co/index.js:102:18
at /usr/local/lib/node_modules/component/node_modules/component-build/node_modules/component-builder/build/plugins/url-rewriter.js:438:7
at /usr/local/lib/node_modules/component/node_modules/component-build/node_modules/component-builder/node_modules/component-manifest/build/index.js:446:7
at fs.js:266:14
at /usr/local/lib/node_modules/component/node_modules/component-build/node_modules/component-builder/node_modules/graceful-fs/graceful-fs.js:104:5
at /usr/local/lib/node_modules/component/node_modules/component-resolver/node_modules/graceful-fs/graceful-fs.js:104:5 +12ms
error : Cannot call method 'process' of undefined
/usr/local/lib/node_modules/component/node_modules/component-build/node_modules/builder-autoprefixer/index.js:21:49
で、例外が起きているのが分かります。
このファイルを見るとauto変数が初期化されていないのが原因ぽい。
builder-autoprefixerのコミットログを見るとそれっぽい修正が入っています。
直すと・・・
component build (git)-[master]
build : resolved in 17ms
build : files in 66ms
build : build/build.js in 69ms - 1kb
build : build/build.css in 69ms - 7kb
無事ビルドが通りました。パチパチ。
結果
build.js
function require(name) {
var module = require.modules[name];
if (!module) throw new Error('failed to require "' + name + '"');
if (!('exports' in module) && typeof module.definition === 'function') {
module.client = module.component = true;
module.definition.call(this, module.exports = {}, module);
delete module.definition;
}
return module.exports;
}
require.modules = {};
require.register = function (name, definition) {
require.modules[name] = {
definition: definition
};
};
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")
require関数の定義が追加されています。
抜粋。外部ライブラリのcssファイルと結合された上で、こんな感じでベンダープレフィックスが追加されます。
hr {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
元のファイル
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
