昨年のAdvent Calendarを眺めたり、JS周りの記事を見ていると、RequireJSとか、CommonJSとか、AMD、Browserify、webpackあたりが、同じような文脈で登場するんですが、それぞれ何を指しているのかよくわからなかったため、今更ながらまとめてみます。 前提 小規模にしかJavaScriptを使っていないWebサイトでは、jQueryを使ってDomイベントで色んな処理をして、Domに反映させる。というような処理が、ごちゃっとまとめて書くことが多いかと思います。ごちゃっととは、特にDomにしか情報を保持していない状態を指していて、イメージとしてはこのようなコードです。 $(function() { # イベントハンドラ $("#btn").on("click", function(){ $.ajax({ url: "api/resources", dataT
この記事は JavaScript Advent Calendar 2015 10日目の記事です。 去年は主に gulp にフォーカスした内容でしたが、今回はJSのビルドとテストにフォーカスした入門記事です。 やること ES2015で書いたコードをWebpackでビルドする babel@6系を使う Mocha + power-assert + jsdom でテストを書く やらないこと gulpまわり React.js CSSビルドまわり 最終的なコードはこちらに上げておきました(すごく簡素な出来です)。 GitHub - sskyu/webpack-power-assert-jsdom-skeleton はじめに 今年はReact.jsがJSerの中で定着した感がありました。 Fluxの考え方を昇華させたReduxがFlux系フレームワークでデファクトになりそうな雰囲気を出しつつ、React
In the land of JavaScript, no one is king for long. Just last year Grunt was effectively dethroned by Gulp. And now, just as Gulp and Browserify are finally reaching critical mass, Webpack threatens to unseat them both. Is there truly a compelling reason to change your front-end build process yet again? Let’s consider the merits of each approach. Browserify (and friends…)Browserify is conceptually
ブラウザ上もでrequire使いたい 現状Coffeeのclassを異なるファイルから参照するにはwindow.HogeClassとか@HogeClassとかでグローバル変数をってたんだけどBrowserifyを使えばNode.js のモジュールのようにrequireで読み込みことができるっぽい。参考記事を見ながら簡単なサンプルを実際に作ってみた。 grunt-cli のインストール npm install -g grunt-cli package.jsonを作成 npm init 対話形式でpackage.jsonを作成。 必要な情報を入力してください。 プロジェクトに必要な情報を記述するjsonファイルが生成されます。 browserify grunt grunt-browserifyのインストール npm install browserify grunt grunt-browseri
browserify の API が変わったので、この記事のコードのままでは動きません！ gulp で browserify しようとしたんだけど、 色々ハマったので、 ひとまずまとめておきたい。 登場人物 gulp ちゃん フロントエンドのビルドエンジン。 grunt を馬鹿にしてる。 browserify ちゃん CommonJS スタイルの require をフロントエンドでも使えるようにする npm モジュール。 調子に乗ってるけど webpack がきになる。 vinyl ちゃん npm 全般で使うオブジェクトの名前。モナドを感じる。 俺がさっき知った。 gulp の仕組み そもそも gulp って、確かに grunt より短く書けるけど、 具体的になにしてるのかよくわかんねーよ！ って思ったので、 まず、この短いコードから考えていきたい。 var gulp = require(
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
