Gruntでbrowserify使ってCoffeescriptをコンパイルする。 - Toro_Unit
なんかCoffeescriptをGruntでコンパイルして、concatしたりとかだるいなーってずーっと思ってました。 Classとかを他のファイルから参照しようとするとwindow.classNameとか@classNameとかにしないといけないですし、ファイル名順に結合するので、アルファベット順で後ろにくるクラスを読もうとするとエラー吐いたり、いまいち依存関係が見えなかったり。 小規模な開発であれば問題ないのですが、Coffeescriptで大量にClassを作ったりすると、結構大きな問題になってきます。かといってrequire.jsとか面倒くさい。 というわけで、最近流行のbrowserifyを使ってみました。 npmとbrowserifyを使ったクライアントサイドのウェブアプリ開発 Browserify: それはrequire()を使うための魔法の杖 ざっくり言うと、ブラウザで、n
Browserifyの使い方について調べてみた - yutaponのブログ
最近Browserifyって単語を良く見るようになりました。 Browserifyをざっくり説明すると、 ブラウザ上でもNode.js用モジュールを使えるようにする ブラウザでもrequire()を使ったモジュール管理を使えるようにする という特徴があるようです。 browser（ブラウザ）+ fy（〜する）という単語からもNode.jsをブラウザ化するってニュアンスでしょうか。 require()といえばRequireJSも提供してますよね。 Browserify使うことでRequireJSを使わなくてもモジュール管理ができるようになりそうです。 Browserifyの使い方 まずは公式サイトに載ってるコードを試してみます。 browserify これはどうやらNode.js向けのモジュールをブラウザでも使えるようにするチュートリアルのようです。 まず作業ディレクトリを作成します。 $
ちょっとしたフロントエンド開発のセットアップ - Qiita
最近だとGrunt使ったりgulp使ったり、またはGoogleのWeb Starter Kit使ったりしてセットアップすることが多いと思います。 ただ、何かを新しいフレームワークを試したりしたいだけのときにこれらの設定ファイルとか無駄に増えるのもイヤだなと思ったりしていて、最近はbrowserifyとbeefy使ってやっています。 https://www.npmjs.org/package/browserify https://www.npmjs.org/package/beefy 各種変換とLiveReloadが出来れば十分なので。 例はこんな感じ。 https://github.com/koba04/react-boilerplate 設定ファイルがpackage.jsonだけになるのでシンプルです。 package.json 設定はこんな感じでしておくだけです。scriptの設定をし
browserify をはじめてみる
Browserify を触ってみたメモ。 Browserify とは CommonJS のモジュールの仕組み、つまり Node.js の require をブラウザ上でも使えるようにするもの、ということでいいみたい。Readme を読む限りは、npm にあるモジュールをブラウザ上にもっていくために作られ始めたような印象をうけるが、ちまたのエントリーをみていると AMD に代わりに CommonJS でフロントエンドの依存関係の管理をする (RequireJS ではなく、Node.js 感覚で require 関数をフロントエンドで使う) ためのツールとしても使っていいようだ。 やりたいこと 複数の js ファイルの依存関係を記述したい 最終的に、依存関係を考慮した順番で、ひとつの js ファイルに結合したい 作りたいのは第三者のサイトに埋め込んでもらうスクリプト (サードパーティスクリプト
React入門 - Part2: Browserify/Reactify/Gulpを使う - Qiita
前回作成したhelloworldはブラウザでJSXTransformerを読み込みオンラインでjsにコンパイルしていました。実行時にChromeのデベロッパーツールに表示されるように、予めJSXはコンパイルすることが推奨されています。コンパイルの方法は、jsxコマンドを使う方法、 BrowserifyとReactifyを使う方法、最後にGulpのタスクでまとめる方法を順番に試してみます。 Getting Startedの復習 作成したhelloworld.jsxを少し修正してコンポーネントを作り構成してみます。ディレクトリ構成は以下です。 $ cd ~/react_apps/helloworld/ $ mkdir src dist $ mv helloworld.jsx src/ $ tree . . |-- dist |-- index.html `-- src `-- hellowor
npm, browserify(reactify)をつかって、reactの開発環境を整える(jsxを事前に変換するようにする) - kitak blog
こんにちは。バナナを三本食べました。きたけーです。 前回、React.js をとりあえず触ってみた - きたけーTechブログ の記事でreactを試してみましたが、 実際のアプリケーションでは、ページを表示する度に毎回jsxを変換するわけにはいかないので、 今回はbrowserify(reactify)をつかって、jsxを事前に変換するようなタスクをnpm run-scriptsで定義するようにします。 ※ jsxの事前の変換自体は react-toolsパッケージで入るjsxコマンドでできますが、今回はbrowserifyで依存管理/解決もおこないたいのでreactifyをつかっています。 必要なパッケージをいれる npm install react --save npm install browserify --save-dev npm install reactify --save
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
