【フロント開発環境】Webpackで開発環境を作る – Raspiのダッシュボード計画(1.1)

JavaScript,Mac,環境構築

こんにちは、しきゆらです。

前回、Raspiを使ってダッシュボードのようなものを作りたいということで準備をしていました。

 

そこからかなり間が空いてしまいました。

さっくりと作ろうとしている環境をメモしつつゆっくり進めていこうと思います。

ということで、今回は開発のための環境づくりとしてフロントエンドでよく使われるWebpackを使って見ようと思います。

 

 

作っていく開発環境

今回、触ったことのないものを使って作っていこうと思っています。

サーバサイドはRuby、クライアントサイドはJSなのでフレームワークは以下のものを利用していこうと思います。

  • サーバ：Ruby on Rails
  • クライアント：React

どちらも有名なものですが、触ったことがないものでした。

そんな簡単な理由で選びました。

 

クライアント側の環境構築

クライアントの開発環境はとても面倒なようです。

JSも記法も色々有り、ES5、ES6などあるようです。

そんな記法を、コンパイルして別の言語(新JS =>旧JSへ )として利用できるようにする必要がある。

トランスパイルというらしい。

 

また、複数に別れたJSファイルはブラウザで読み込もうとするとそれぞれに対してリクエストが発生する。

すると、それぞれを読み込むまでに時間がかかってしまう。

結果的に、画面の表示や動きが悪いと感じる。

そこで、複数のファイルをまとめて一つのファイルにしてあげると、1度で済みますね。

 

これらをいい感じにやってくれるのがWebpackです。

タスクランナーなどは色んな種類が有りますが、Webpackは上記のようなことに加えて

JS以外にも画像やCSSもまとめて1つにまとめることが出来るようです。

 

しかし、正直なところ画像やCSSをJSとしてまとめるのは気持ち悪いので、JSだけをまとめるようにしていきます。

 

Webpackを使うための準備

WebpackはNode.jsの上で動いているようです。

ということで、まずはNode.jsを入れましょう。

Macであればhomebrewで一発。

brew install node

 

ついでに、yarnと言うものも入れておきましょう。

これは、Node.jsで利用するライブラリなどの管理をしてくれるものです。

標準ではnpmと言うものが有りますが、インストールに時間がかかります。

単一でダウンロードしたりしているからだそうです。

 

そこで、npmでやっていることを並列でやってくれるのがyarnです。

しかもnpmで利用しているpackag.jsonを利用できます。

これは利用するしか無いでしょう。

ということで、yarnも入れましょう。

これもbrewで。

brew install yarn

 

Webpackのインストール

yarnを使ってパッケージを入れていきます。

Webpackをインストールするには、以下のように。

yarn add webpack webpack-cli

これで基本的なものは勝手に必要なものを一緒に入れてくれます。

 

そして、トランスパイルするためのものをひとしきり入れていきます。

yarn add babel babel-core babel-preset-es2015 babel-preset-env

これで変換するためのものを入れました。

 

Webpackの設定

トランスパイルするための設定をしていきます。

const crntDir = __dirname;
const path = require('path');

module.exports = [{
  mode: 'development',

  entry: path.resolve(crntDir, 'client/main_page.js'),

  output: {
    path: path.resolve(crntDir, 'public/js'),
    filename: 'main_page.js',
  },

  module: {
    rules: [{
      exclude: /node_module/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015'],
      },
    }],
  },
  resolve: {
    extensions: ['.js'],
  },
}];

簡単な解説。

  • mode: Webpackのモードを指定。developmentかproductionにすると、いい感じに動いてくれます。
  • entry: トランスパイルのもととなるファイル。このファイルからimportされているものたちもひとまとめに処理してくれます。
  • output: 出力先を指定する。
    • path: 出力先のディレクトリを指定。
    • filename: ファイル名。
  • module: トランスパイルするためのものを指定する。
    • rules: 使うものの指定
    • exclude: 無視するディレクトリ。ここでは、yarnで入れたパッケージのディレクトリを無視している。
    • loader: トランスパイルするためのものを指定。
    • query: トランスパイルする時に使う付属品の指定。

ちょっと面倒ですが、これらの設定をファイルごとに作っていきます。

 

複数のファイルを、同じ設定でトランスパイルしてほしいときもあるかと思います。

複数のファイルを同じ設定でトランスパイルするためには、entryの部分に連想配列形式で指定する。

entry: { 
  "hoge": "path/to/hoge.js", 
  "fuga": "path/to/fuga.js" 
}

出力するファイル名は、filenameで決め打ちで作ってしまうと、1つのファイルに上書きされてしまい、hogeの結果とfugaの結果の片方しか残りません。

そこで、それぞれのファイルごとに結果を出力するためには、

output: {
  path: path.resolve(crntDir, './app/assets/javascripts/'),
  filename: '[name].js'
},

のように[name]と指定すると、entryのkeyがファイル名となります。

 

 

 

 

まとめ

さっくりと環境を作ってきました。

後は、この環境にReactさんを突っ込んでいきます。

 

今回はここまで。

おわり

Posted by しきゆら