タスクランナーを使わずに webpack だけでフロントエンド開発する方法 – Web Application Security Memo
注意：この記事では Babel 5 を使っています。 Babel 6 を使用する場合は、このままだと動作しません。対応方法は、Quick guide: how to update Babel 5.x -> 6.x — Medium 等を参照して下さい。 Grunt や Gulp などのタスクランナーを使わず、webpack だけでフロントエンドを開発する方法を調べてみました。 以下、実際に簡単なウェブアプリケーションを作ってみます。 環境 webpack 1.12.0 ESLint v1.2.1 OS X 10.10.5 前提条件 JavaScriptは ECMAScript 6 で書けるようにします。但し、今回の記事内では ECMAScript 5の文法のみ使用しています。 CSSファイルは webpackで処理することにより、JavaScript のコードで表現されるようになります。こ
webpack-dev-serverの基本的な使い方とポイント - dackdive's blog
はじめに （2017/08/10追記） この記事では webpack-dev-server を独立したサーバーとして使う場合の方法です。 また webpack 1 系の情報になっており少々古いです。 最新の設定についてはこちらの GitHub リポジトリを参考にしてください。 https://github.com/zaki-yama/redux-express-template （追記ここまで） JavaScript のビルドに webpack を使っている場合、ローカルでの開発には webpack-dev-server を使うと便利です。 通常の webpack コマンドも --watch （または -w）オプションつきで実行することにより ファイルの変更を検知して自動でリビルドを行うことが可能ですが、 webpack-dev-server は上記に加えて ローカルサーバーも起動してくれ
npm + gulp + webpack でつくるES6/sass開発環境
最近はJavaScriptをES6で書いたり、cssをsassで書いたりするのが当たり前になってきました。そうなると必然的に必要になるのがビルド。ビルドの仕組みも充実してきていて、単にトランスパイルするだけでなく、構文チェックしたり圧縮したり、CSSスプライトをつくるようなことまでできたりします。 で、このビルド環境、新規Project立ち上げる度に用意するのが面倒くさいので、自分用の雛形をつくりました。よかったら参考にしてみてください。 ビルドの中身 ES6 → ブラウザで動かせるJavaScriptにする scssをcssにする jsとcssはそれぞれ結合して圧縮する(.min.js/.min.cssをつくる) 変更を検知して自動ビルドする 雛形なので特別なことはしません。新しく何かつくりたいと思ったときにすぐに作れるようなビルド環境を用意するだけです。デバッグ用にトランスパイルしただ
webpackで作るSprockets無しのフロントエンド開発 - クラウドワークス エンジニアブログ
こんにちは！12月に子供が生まれたばかりの鈴木( @suzan2go ) です。現在は週2~3日リモートで子供の成長を片目にみつつコードを書いています。うちの子はガラピコぷ〜がお気に入りです。 さて今回はRailsでのフロントエンド開発についてです。 昨今のフロントエンドの進化はめまぐるしく、Rails標準のSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みでは以下のような要望に答えられなくなってきています。*1 ECMAScript6で書きたい！ フロントエンドのライブラリ管理にnpmを使いたい！ で、上記に対応するにはおおまかに分類すると以下のような方法があります。 browserify-rails を使う github.com これが一番導入が簡単ですし、既存のRailsアプリに突っ込むならこれが選択肢としては手堅いと思います。 ただ開発中のビルドがめ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
