タグ

browserifyとjavascriptに関するnibushibuのブックマーク (8)

  • フロントエンドで使ってるものがあまり変わってない - No Regrets in Bathing

    自分のスタックはあまり変わっていない。ほとんど10年のツケを払っていない。学習能力が低いせいでもあり、選んだスタックがバージョンを重ねている成果でもある。 毎回使う フレームワーク:Vue.js 消耗、などの意見が散見されたが、べつに今でも便利に使えている。 browserifyやwebpackがあれば便利だけど、なくてもいい、ってバランスが好き データフローは特に考えない。状態がそこにあるので書き換えれば良い。 あまり頭を使わなくていいのが助かる Reactの考え方は好きなのだけど、よっしゃFluxやるぞって気持ちにはならず、Reactのみでよしなにやるソリューションが広まったらいいなと思う。 ビルドシステム: browserify / watchify substackの作るものはどれも品質が高いので、もうsubstack製品だけ使っていればいいやという気持ちになりがち。余計な処理が全

    フロントエンドで使ってるものがあまり変わってない - No Regrets in Bathing
  • JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack) | tsuchikazu blog

    昨年の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のモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack) | tsuchikazu blog
  • 既存 JS ファイルを Browserify 用に書き直す - Qiita

    以前書いた記事で Browserify の使い方とか Browserify でやりたい事が分かったと思う。 では実際に Browserify を使って今までに書いたコードを Browserify 用に書き直してみる。 といっても大したことはない。1つのオブジェクトなり関数にまとめるだけで良い。 例として、よくあるスムーススクロールのスクリプトを挙げる。 $(function(){ $(".anchorlink").on('click', function(e){ e.preventDefault(); var href = $(this).attr("href"); var speed = 500; var easing = 'swing'; var target = $(href == "#" || href == "" ? 'html' : href); var animatePara

    既存 JS ファイルを Browserify 用に書き直す - Qiita
  • JavaScriptでのモジュールロード方式とパッケージ管理についての勉強メモ(2015-03時点) - msakamoto-sfのはてなブログ

    2015-03-23 JavaScriptでのモジュールロード方式とパッケージ管理についての勉強メモ(2015-03時点) npm Node.js Browserify Bower RequireJS webpack CommonJS AMD 2015-03時点でJSのモジュールロードとかパッケージ管理について見てみると、CommonJSだとかAMDだとかBrowserifyとかwebpackとかbowerとか色々出てきて混乱したので、整理してみた勉強メモです。各プロダクト・仕様のできることや役割について、まだまだ誤解してる部分もあると思いますので、勉強中ということで割り引いてください。 簡単な歴史と経緯 ※細かい歴史とか時系列は無視してます、というか知らないで書いてます。あくまでも自分の頭のなかでの整理用。 require.jsがブラウザ上のアプリで頑張ってモジュールロードできるようにし

    JavaScriptでのモジュールロード方式とパッケージ管理についての勉強メモ(2015-03時点) - msakamoto-sfのはてなブログ
  • React + BrowserifyプロジェクトでJS/CSS/HTMLを圧縮(Minify)する - Umi Uyuraのブログ

    ReactとMaterial UIを組み合わせると、それだけでBrowserifyで結合したJavaScriptファイルが1MB超えてしまうので、やっぱり圧縮とかした方が良いのかな―と思い、やり方を調べてみました。 ※2015/08/03更新 Licensifyを開発された @t_wada さんから改良の連絡をいただいたので、Licensifyの最新版1.4.0をもとに内容を更新しました。 Licensify - Nodeモジュールのライセンスコメントを生成する JSファイルを圧縮すると、ライセンスが記載されているコメントが消えてしまうという問題があるということで、題の前に、Browserifyと組み合わせて、読み込んだNodeモジュールのライセンスコメントを生成してくれる Licensify を試しておくことにしました。 インストールはnpmから。 $ npm install lice

    React + BrowserifyプロジェクトでJS/CSS/HTMLを圧縮(Minify)する - Umi Uyuraのブログ
  • 最近あまり使ってない、流行っていた時期もあるフロントエンドもの

    最近あまり使ってない、ちょっと前の流行りもの なんとなく書いてみます。Web アプリケーション開発屋さんなので、Web サイト制作屋さんとはかなり文脈ズレると思います。 jQuery ファミリー 個人的には jQuery って、協業用のツールという位置づけでした。jQuery でさえ書かれていれば、jQuery 書ける人材のほうが外からも調達しやすいため、人員の流動にも有効と考えられる頃が確かにありました。 DOM に触れてくれるな勢の台頭 ところが昨今では AngularJS や React、その他ライブラリでも DOM 操作が大いに抽象化されていることが多く、jQuery で直接 DOM を操作すること自体が相性良くないケースが散見されます。今思えば Backbone.js くらいのころが jQuery 需要の最終ピークだったように思います。 jQuery プラグイン の需要減 jQu

    最近あまり使ってない、流行っていた時期もあるフロントエンドもの
  • むしろ駄菓子屋さんで | browserify概説

    browserify(ぶらうぜりふぁい、と発音しているのを誰かから聞きました)は、その便利さに比して、利用例などが少ないため、お粗末ながら、今日までにわかったことをまとめてみようと思いました。ドキュメントが足りない状況はしばらく変わらないと思いますので、ハックヒント用に内部構造を含めて、概要を伝えられればと思います。 そもそもbrowserifyとは 御存知の通りnode.jsはブラウザでも動作するjsで記述します。ですから、サーバーとクライアントで共有できるコードは共有したいものです。ですが、それには幾つかの壁がありまして、思いつく分だけを書きますとこのぐらいになります。 モジュールシステム(CommonJS) node.jsの組み込みモジュール http要求を受け取って、ブラウザへコードを届ける仕組み これらを提供するのがbrowserifyです。 処理の概要 browserifyの流

  • Browserify: それはrequire()を使うための魔法の杖 - Qiita

    JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで

    Browserify: それはrequire()を使うための魔法の杖 - Qiita
  • 1