初めてでもできるwebpackとbabelを使ってみるまで
ちょっとずつwebpackを触って理解していこうという第一弾です。
一度webpackを使って、React.jsをes2015で書くまでのものは作ってみたんですが、見よう見まねで理解できてないところも多いです。
React-starterkit
この時は最初から入れたいものをガシガシ入れていってたので、理解できなくてもどんどん進んでましたが、次は小さく始めてみて機能を追加していって何回かに分けて勉強しようというものです。
今回はwebpackでbabelを使えるようにし、es2015の書き方でコンパイルするまでをやります。最終的にはReact.jsで開発するのを想定した作りにしようかなと思いってます。
webpackとは
引用ですが、webpackは依存関係を解消してくれるツール。
webpackはWebAppに必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。JavaScriptだけでなく、CoffeeScriptやTypeScript、CSS 系、画像ファイルなどを扱うことができます。
複数あるJSのファイルを一つにまとめたり、いろいろ意見ありますがCSSもJSの中にまとめることができるようです。そのあたりも後々試してみたいと思います。
webpack
準備
まずはプロジェクトフォルダを作成し、移動します。
mkdir sample && cd sample
次に、package.jsonを作成します。
npm init -y
そして、webpackとbabelを使うために必要なパッケージをインストールします。
npm i babel-core babel-loader babel-preset-es2015 webpack -D
書いてみる
まずはディレクトリを用意します。
mkdir src public
必要なファイルも一式作ってしまいます。
touch .babelrc webpack.config.js
.babelrc
{
"presets": [
"es2015"
]
}
webpack.config.js
webpackの設定ファイルには以下を書きます。
const path = require('path');
module.exports = {
entry: path.join(__dirname, 'src/app.js'),
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
}
]
}
};
ちょこっと書くだけですね。
最初の「const path = require(‘path’);」はNode.jsのpathモジュールです。相対パスで書く必要があるところを絶対パスで書けるようになるみたいです。
ざっくり言うとentryは対象ファイル、outputは書き出しファイルです。
loaderというのがwebpackの強力な機能で、loaderを使えば何でもかんでもjsに変換してくれます。
loader一覧
loaderはちょこっとずつ触っていこうと思います。
動かす
srcディレクトリ以下にapp.jsを作り、このように書いてみます。
app.js
const sum = (a, b) => {
return a + b;
};
constとかアロー関数を使ってみます。
そして、以下のコマンドを打ちます。
./node_modules/.bin/webpack
するとコマンド上でメッセージがでて、dist以下にbundle.jsができていると思います。
bundle.jsを開くと、いろいろとwebpackの記述があり、下の方にコンパイルされたコードが！
"use strict";
var sum = function sum(a, b) {
return a + b;
};
さいごに
今回は本当に触り部分だけです。冒頭で書いたようにReactを使えるようにしてみたり、CSS Loaderとか自動リロードとかいろいろ試していこうと思います。
- 初めてでもできるwebpackとbabelを使ってみるまで
- webpackでReact.jsとwebpack-dev-serverを使えるようにする
- webpackで開発時にソースマップを出したり本番用に圧縮する