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

wzrd - もっとも簡単なフロントエンドの為のbrowserifyサーバー

More than 5 years have passed since last update.

よくある問題

こういうディレクトリ構造で(単純化してます)

index.html
index.coffee # bundle.jsにコンパイルされる
bundle.js

index.coffeeを起点に、browserifyでjsに変形しつつbundle.jsに結合していたとします。
で、index.htmlは <script src="bundle.js"></script> で読み込んでるはず。

たぶん、こういう感じに実行していると思います

browserify -t coffeeify --extension=".coffee" index.coffee > bundle.js

このとき、.gitignore書いたり毎回ビルドしてブラウザのリロードの前にbundle.js管理するの面倒くさいですよね。

(注意: この例ではcoffeeifyを使うのでnpm install coffeeify が必要です)

Wzrdを使う

maxogden/wzrd

npm install wzrd -g

wzrdはパス解決時にbrowserifyによるビルド結果を返す簡易アセットサーバーを建てます。

browserify -t coffeeify --extension=".coffee" index.coffee > bundle.js

だと、次のようになります。

$ wzrd index.coffee:bundle.js -- -t coffeeify --extension=".coffee"
server started at http://localhost:9966

http://localhost:9966/index.html を開くと, bundle.jsを読みに行った時にbrowserifyで実行した結果を返してくれます。

何が嬉しいの

ファイル監視じゃなくてブラウザリロード時に読み込み直してるのがポイント。

index.html index.coffee package.json のミニマムスタートができて自分は非常に嬉しい。webpackはどうも設定が増えてごてごてしていく。

というわけで最小のフロントエンドプロジェクトテンプレートを作ってみた mizchi-sandbox/minskl

それではよきフロントエンドを。

plaid
CXプラットフォーム「KARTE」の開発・運営、EC特化型メディア「Shopping Tribe」の企画・運営、CX特化型メディア「XD(クロスディー)」の企画・運営
https://plaid.co.jp/
Why not register and get more from Qiita?
  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
No 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
ユーザーは見つかりませんでした