webpack2はじめました - Qiita
仕事のプロジェクトでお世話になっているRailsが5.1からwebpackがサポートされるということで、そろそろモダンなフロントエンドにも力入れていきたい所存であるからして、手始めにwebpackとはなんぞやというところから始めようと思った次第です。 webpackとは webpack事始め v1とv2で全然違うのが罠 以上のことを自分なりにまとめてみました。 自分用の備忘録なので、分かりづらかったり、よく理解できてなかったりするかもしれませんが…コメントなどで指摘していただけるとありがたいです。 webpackとは webpackとはなんぞや。 早い話、Ruby大先生で言うところのBundlerみたいなもの……って例えるとわかりやすいでしょうか。 ちょっと違うような気もします。Node.jsのnpm先輩もいますし…。 モジュールバンドラー っていうのが正解らしいのですが、じゃあこの_モジ
今時のフロントエンド開発2017 (2. 構築編) - Qiita
はじめに 本編では今時のフロントエンド開発2017 (1. 愚痴編)に続き開発環境の構築をしていきます。 おしながき 今時のフロントエンド開発2017 (1. 愚痴編) 今時のフロントエンド開発2017 (2. 構築編) 今時のフロントエンド開発2017 (3. webpack編) 今時のフロントエンド開発2017 (4. TypeScript編) 今時のフロントエンド開発2017 (5. もっと効率よく編) 開発環境の構築 ナイスなエディタ コーディングをするにはエディタが必要になるわけですが，これは皆さんの信じるお好きなものを使ってください。 Atom Brackets Emacs Lime Text Sublime Text Vim Visual Studio Code なんでも良いです。 ちなみに私はVisual Studio Codeを使っています。 CLIの準備 準備と書きまし
browserify/webpack のbundle結果にES2015がうっかり紛れ込んじゃう問題に対処する - Qiita
先日やらかしたので、その問題と対処 問題について 何が起きたか？ browserifyでbundleしたファイル結果にES2015でのみ動く記述（constやarrow function）が混ざって動かなくなった。 結合しているファイルがParse Errorによりごっそり全部動かない事態に。 babelifyも組み合わせていたが、node_modules以下はtranspile対処ではないので、変換されなかった（2016/08/10追記) なぜ起きたか？ browser対応してないパッケージを利用してしまっていた 依存するパッケージのソースが、ES2015で書かれていた NodeJSは既にES2015で問題なく書ける パッケージ提供側は全く悪くない。利用者側（＝自分）のミス 同じ機能を持つブラウザ向けのパッケージがあるのを見逃していた なぜすぐ発見が出来なかったのか？ chromeなどで
webpack最低限（JavaScript編） - Qiita
webpackについて自分用のメモになります。 最低限という背景 普段はBtoB向けのコーポレートサイトの制作が多く、ビルドツールはGulpでもGruntでもなんでもよいのが現状であり、ビルドツールを使用しなくてもなんとかなる感じです。 ただ、流行や今後の動向は理解しておきたいということで、自分の中で最低限webpackでやりたいことを実装してみました。 最低限やりたいこと javascriptのモジュール管理、Minify、es6/2015のトランスパイル Sassのコンパイル、ベンダープレフィックスの付与 ブラウザのオートリロード 上記の内容を数回に分けてまとめたいと思います。本記事では1のJS関連を扱います。 対象読者 流行はつかんでおきたいけどあまり難しいことはしたくない、とにかくwebpackを使ってみたいという方向けかと思います。 インストール まずはwebpackをインストー
Gulp+Browserifyにしようと思ったがMakefile+Webpackで事足りた - Qiita
モダンなクライアントサイドの開発環境を整えたいと思い、とりあえず名前をよく聞くGulpとBrowserifyを検討してみました。が、結論を言うと、僕のプロジェクトの場合、MakefileとWebpackだけで十分そうでした。 開発スタイルを向上したくて検討することにしました 僕のプロジェクトでは、今まで素のJSとjQueryとの組み合わせだけでクライアントサイドを作っていましたが、SPAにしたいReact使いたいというモチベーションが出てきて、クライアントサイドの開発スタイルを整備する必要性が出てきました。 いいきっかけなので、次の点を整備をしたいと思いました。 type-safeなAltJSを使いたい ← これからはクライアントサイドでもロジックがガリガリ書かれそうなので、コンパイルがあってかつ型安全な言語を採用したいと思いました。 コマンド一発でbundle.jsが作れる ← 今までは
Rails で watchify と browserify を使い分けられる gem を作った - Qiita
弊社は今週はハックウィークといって通常業務止めて周辺ツール作ったりいつもはできないことをやる週として割り振られている。(その割には昨日Contributionの計算の変更とかリリースしてた気がするが) それで仕事で使ってた browserify_rails が遅すぎて辛かったので、趣味でいつも使ってた watchify をRailsにインテグレーションするgemを作ってみた。 はじめて作ったgemなんで手加減して https://github.com/increments/brwy_rails 。 brwy は browserify_watchify_rails が長すぎて略したけど意味わからん気がする。 watchify とは browserifyと違ってコンパイル後もコンパイラプロセスが中間状態を保持したまま常駐して、依存のファイル監視して差分ビルドを行ってくれる。仕組み知ってたら速く
フロントエンドJavaScriptでもrequireを使ってモジュールを分割する - Qiita
最近、今まで色々と書いてきてた WebフロントエンドUIの 各モジュールファイルをあらかた書き換えた。別に機能を増やしたりしたわけでないんだけど、最近の JS のモジュール化の動きで今までの方針でもモダン（って良い方があってるかどうかは知らんけど）な方針も使えるように変更したので、その経緯とか結果とかを残しておこうと思った次第です。 今までの書き方は基本的にプロジェクト毎にユニークなグローバルのオブジェクトを作ってそこに各UIのオブジェクトをプロパティとして生やしていくという多分それなりにスタンダードだった方針を取ってた。 これがここ数年でガラッと変わったのでそこら辺についてまず。 JavaScriptにはモジュール化の仕組みがない そもそも、JavaScriptにはコードをモジュール化してそれを必要な際に呼び出して使用するような仕組みが言語仕様として存在しない。 よほど小さいプログラムで
Rollupがちょうどいい感じ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 昨年の途中からちらほら耳にするものの、まだ「なにそれ美味しいの?」なRollupですが、馴染むと手放せなくなる感じ。どんなものか、使い方から、プラグインのつくりかたまで、概観してみたいと思います。 Rollupって何? 複数ファイルに書かれたJavaScriptを、モジュールなどを読み込みつつ、ひとつのバンドルにしてくれるツール。WebPackとかBrowserifyみたいなやつです。依存モジュールの解決や、AltJSのプリコンパイルしたり、など。大きな特徴として、次の点がよく挙げられます。 生成ファイルが小さい ES6(ES2015)
webpack入門 - Qiita
React初学者のためのガイドで著者のPete Hunt氏がオススメしていたwebpack入門を和訳しました。 意訳が含まれるため、誤りやより良い表現などがあればご指摘頂けると助かります。 原文：https://github.com/petehunt/webpack-howto Webpack入門 このガイドの目的 これはwebpackで物事を成し遂げるためのクックブックです。インスタグラムで実際に使用されているものをほぼ網羅した実践的な内容となっています。 私からのアドバイス：まずはこれをwebpackの参考資料として手元に置いて始めてみましょう。公式ドキュメントは理解を深めるために後で参照することにしましょう。 前提条件 browserify、RequireJSまたは類似したものを知っていること 下記のいずれかに価値を見出していること バンドルの分割 非同期ローディング 画像やCSSの
Browserifyの運用 〜 bundleを分ける - Qiita
Browserify使いはじめてしばらくたって、自分なりのコツがつかめてきた気がするのでまとめてみます。 まず今回のコンテキストとしては画面遷移をそれなりに含み、同じモジュールを各画面で使う前提。 SPAだとちょっと考え方が変わるかもしれません。 【対策以前】全部をbundleすると太る Browserify覚えてしばらくは、ページ毎の実行部分も含めてbundle.jsにひとまとめしてたけど、各ページ共通部分があるにもかかわらず別ファイルになってしまい、ブラウザキャッシュも生かせず、ファイルサイズも肥大化して微妙だなぁと感じていました。ビルドも毎回でgulpタスクも重くなりがちでした。 共通部分も別々のファイル ブラウザキャッシュ活かせない ファイルサイズ肥大化 ビルド重め ファイル配置例 . ├── node_modules │ ├── knockout │ └── unders
app/assets/javascripts以下のJSを全てcommonjsのrequireに書き換える - Qiita
仕事でgulpを使って僕がよくいじる一部のjsを高速でビルドできるようにしてみたのだが、JSをいじらない人の手元でなにかと差分がおかしくなったり、ビルドするタイミングを伝えないことで問題起きたり、その為に呼ばれて治すのがとにかくめんどくさかったため、思い切ってすべてのビルド工程をbrowserify_railsとbrowserify-incrementalと(そのtransform)に押し込んで、gulpを排除してみた。 そんで、browserify_rails は導入しただけだと嬉しさがあまりないので、スクリプトを書いて一気にcommonjsに置き換えることにした。 browserify_rails に関してはhokacchaさんの記事が便利。 モダンJavaScript開発環境 on Rails - クックパッド開発者ブログ 脇道にそれるが、僕は最初、これをbrowserifyを模した
既存 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
例えばBrowserifyをなんて発音するのかわからない時にとるべき行動 - Qiita
JSをやっていると日々いろんなフレームワークやらツールに出会いますが、 それを人に口で話すときに読み方をなんて読むのかわからなくて変な汗をかく時がたまにあります。 最近、読み方がわからなかった言葉がこれです。 Browserify 私はリアルで人とBrowserifyについて話すことがないので、 口にだすことがありませんでした。 しかし、最近チーム内でBrowserifyを導入することになったので、 Browserifyを口にださなくてはいけなくなりました。 他のメンバーはBrowserifyを知らないのでなんて読むかも当然知りません。 こうゆう状況は、自分が間違えた読み方をしてしまうとみんな間違えて覚えてしまう可能性があります。 うかつに変な読み方をした時の罪は重いのではないかと思います。 そこで私がとった行動を書いておきます。 既存の英単語から名前がとられているか調べて見る。 wiki
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Railsで利用するフロントエンドのライブラリをnpmからインストールする - Qiita
browserify + npmでReactを使う場合はNODE_ENVを設定するとよい - Qiita
