注意:この記事では 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(ウェブパック)とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない・・・なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5(2020年10月リリース)以上で解説しています。 本記事で解説しているこ
こんにちは、まろCです。 2月に2本のLTに登壇してきたのですが、どちらもwebpackを題材にして喋ってきました。 今回は、そのときのスライドを共有したいと思います。また、すぐに使えるインストール方法もあわせて解説したいと思います。 webpackとは http://webpack.github.io/ webpackとは、一言でいうと依存性を解決するツールです。 HTML上に、何本もscriptタグでJavaScriptを読み込んでいたものを、1本のJSにしてパックします。 エントリーポイントと呼ばれるJSにrequireと書いて、他のJSを読み込むことで、ビルド時にそれを探して1つのJSファイルの中に書き出してくれます。 自作のモジュールを、パスから引っ張ってきたりbowerから引っ張ってきたりできるのはもちろん、node_modulesからも使えるものは使えたりと何でもありなツール
はじめに webpackが流行ってきているようなので、がんばって使ってみます。 流れが早すぎておじさんには辛いです。 せっかくwebpackを使うのでreact.jsを使ってみます。 こちらもはじめて。 webpackとは jsの依存関係を解決して、複数のjsファイルを1つに結合してくれるビルドツールです。 大規模なアプリケーションを開発する際に、力を発揮しそうです。 ◎gulpなどで結合するのとの違い gulpなどでjsファイルを結合する際は、読み込み順を気にする必要がありますが、 webpackの場合、requireした箇所でモジュールを読み込んでくれるので順番を気にする必要が無いようです。 webpackを使ってみる ◎webpackをインストール
module.exports = { entry: './source/main.jsx', output: { filename: './build/bundle.js' }, devtool: 'inline-source-map', module: { loaders: [ { test: /\.jsx$/, loader: 'jsx-loader' } ] }, resolve: { extensions: ['', '.js', '.jsx'] } }; webpackの設定ファイルです。 デフォルトでwebpack.config.jsという名前のファイルを読みに行くようです。 ちなみに、npm install webpack -gした状態でこの階層でwebpackと打っても上手いことやってくれます。 entry entrypointです。このファイルのrequireをどんどん辿
全然わかっていないのですが、webpackというのがフロントエンド開発でよさげらしいので試してみたメモ。 基本的な使い方は公式のチュートリアルがわかりやすいのでそちらを参照。 SourceMap そのまま1つのjsにまとめられたらデバッグができなくて死が見えているのでSourceMapを出力する。 webpack実行時にオプションを追加して実行 実行時に--devtool source-mapを追加するだけ。 webpack --devtool source-map source.js dest.js Developer toolsのsourceタブにwebpack://というのができています。 ここからブレークポイントを入れることが可能です。簡単ですね。 configファイルを使う コマンド打つのもだるいのでconfigファイルを作ります。 リファレンスは以下のページ http://we
webpackとは いろんなファイルをtranspileしてES5のJavaScriptに変換してくれるやつ AMDかCommonJSの形式でファイルをロード(CommonJSならrequire)すると、transpileしたファイルをロードしてくれる クライアント側のjsコードでもrequireを使用することができる assetとしてビルドして配布するイメージ コードが共用の場合、設定を変えることで素のrequireを利用するサーバー用コードと、webpackがpolyfillしたrequireを利用するクライアントコードとを別々に生成できる 全てがJavaScriptになる、画像やCSSも 画像は「Base64かFilePath」に CSSは「headにstyleを挿入するjsコード」に 特定のファイルをどのようにtranspileするかはpathマッチングでプラグイン形式で設定する
browserifyについて軽く調べてもよく分からなかったので、ちゃんと調べてみた。 そもそもnode.jsも曖昧だったので、そこから。 Node.jsとはChromeに使われているJavaScriptエンジンV8(Google製)を用いて、サーバ上でもJavaScriptを実行できるようにした環境。 ノンブロッキングI/OJavaScriptはシングルスレッドなので、うまいことタスクを回すために、タスク丸投げ&コールバック回収という形のスタイルを取っている。 ※C10K問題(クライアント1万台接続問題)を解決 ※シングルスレッドだとメモリ消費減かつ、スレッド切り替えがないので速い CommonJSJavaScriptでいろんなアプリケーションを作るための標準仕様。 Node.js、RingoJS(サーバサイドJS)、Titanium等。 Node.js的にはもはやCommonJSをオワコ
★★ bower list --paths でソースマッピングが確認できる。変更するにはどうすればいい? 本家サイト:Bower - A package manager for the web BowerはJavaScript,CSS,HTMLなどを依存関係を含めて管理してくれる、フロントエンド用パッケージ管理ツール。Twitter製 各パッケージにある設定ファイル"bower.json"に依存パッケージが記述されており、インストール時に依存パッケージを含めて読み込む仕組み。プロジェクトディレクトリ内にbower.json があれば、そのプロジェクトはBower対応しているはず(Githubで今人気のライブラリを見てみると、ほぼ"bower.json"がある)。 環境構築時にプロジェクトに設定ファイル"bower.json"を置けば、それに記述されたパッケージ(依存パッケージ含む)を1コマ
Babelの手ほどき 前編 Babelとは BabelはブラウザにまだサポートされていないようなJavaScriptの次世代の標準機能を、現在のブラウザでも使えるようにするNode.js製のトランスパイラです。Babelがどのような働きをするか解説します。 Babelとは 今回紹介するBabel(バベル)*は、次世代のJavaScriptの標準機能を、ブラウザのサポートを待たずに使えるようにするNode.js製のツールです。次世代の標準機能を使って書かれたコードを、それらの機能をサポートしていないブラウザでも動くコードに変換(トランスパイル)します。 「次世代のJavaScriptの標準機能」というのはECMAScript(以降、ESと呼びます)のバージョン6や7で追加された(る)機能、そしてさらにその先の標準機能です。 *注:元々は6to5という名前 Babelはもともと6to5という名
この記事は公開されてから10年経過しています。現在とは内容が異なる場合がありますのでご注意ください。 最新の記事や関連記事をお探しの方は下の「サイト内検索」で検索してみてください。 通常は apache をインストールすると一緒に abコマンド も入っていますが、最初っから apache を入れずに Nginx を入れた場合などは入っていません。 ApacheBench 自体はレスポンス測定とかによく使うのでぜひとも入れておきたいところです。 # yum install httpd-tools ================================================================================ Package Arch Version Repository Size ================================
nginxって去年めっちゃ耳にしました。 node.jsとかとセットで。nginxでリバプロとか。 webサーバーっぽいらしいんだけどじゃあApacheとどうちがうのか。 よくわからないので今から調べてみることにします。 ※本当に今から調べます えんじんえっくす?で合ってますか?読み方 nginx 読み方で検索 nginx(発音は「えんじんえっくす」[3] nginx - Wikipedia らしい。 本題 Nginxは2002年頃にロシアのIgor Sysoev氏によって、1日に5億リクエストを処理するWebサイトのHTTPサーバーとして開発されました。 これから始める人のためのNginx(1):高速・軽量・高機能……Nginxの基礎知識 (1/2) - @IT らしいのです。なるほど。 どうやらその後OSSとして公開されて、C10K問題を解決できるサーバーとして注目されていったみたいで
コードレビューにstashを使ってます。 こいつはgitのブランチ間の差分に対してコメントをつけることができるツールです。 ただ、ネットを介したコミュニケーションって何故か気が大きくなってしまったり、感情が見えづらかったりで誤解を生みがちです。 特にコードレビューって間違いを指摘するとかあんまり楽しい会話をするわけでもないので、言葉には気を使わないといけません。 今日は自分が気をつけている言葉や行いを上げてみます。 否定しない def get_name(name) @user.find(name: name) end ☓:getは軽量なアクセッサとして使うのが常識なのでやめて下さい。 ◯:findしてることが分かるメソッド名が良いです いちいち否定する必要はないです。素直にどうして欲しいか書きましょう。 否定しない2 「けど〜」 def search(name) @user.find(na
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く