読者です 読者をやめる 読者になる 読者になる

倒れるときは前のめり。

カレーが好きです。

ES2015 + Babel + Webpack + ESLint な開発環境をつくった

ナウなヤングに人気な React のチュートリアルを自分もやりたくなったんだが、まあまずは環境構築だよね…ということで、サクッとやってみた。 ついでに Docker 上で動くようにこまかい工夫を加えてみた。

つくったもの

How to Use

$ dbin/yarn install
$ docker-compose up

ディレクトリ構成

$ tree
.
├── .babelrc
├── .dockerignore
├── .eslintignore
├── .eslintrc.json
├── .git
├── .gitignore
├── Dockerfile.dev
├── dbin
│     ├── console
│     └── yarn
├── dist
│     └── index.html
├── docker-compose.yml
├── node_modules
├── package.json
├── src
│     ├── components
│     │     ├── hello.jsx
│     │     └── world.jsx
│     └── index.js
├── webpack.config.js
└── yarn.lock

つくりかた

Docker

公式の node イメージを使った。 alpine ベースだからサイズも小さい。yarn も導入済み。

Dockerfile

FROM node:7.8.0-alpine

WORKDIR /myapp

docker-compose.yml

version: '2'

services:
  main:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - 4000:4000
    volumes:
      - .:/myapp:cached
    command: "yarn start"

docker-compose run ~ と毎回入力するのがだるいので、こんなスクリプトを用意して dbin/console として呼び出すことにした。

#!/bin/bash
set -eux

readonly APP_CONTAINER="your_conitainer_name"
readonly COMMAND="/bin/sh"

docker-compose run --rm $APP_CONTAINER $COMMAND $@

Babel

トランスパイラ。

$ yarn add --dev babel-core babel-loader babel-preset-2015  babel-preset-react

Webpack

ビルドしてくれたりファイル変更を監視してオートリロードしてくれるすげーやつ。

$ yarn add --dev webpack webpack-dev-server

注意点

Docker 環境上で動作させる際には以下留意すること。

  • host: ‘0.0.0.0’
  • watchOptions でポーリング時間を定義
// webpack.config.js

{
  devServer: {
    contentBase: './dist',
    inline: true,
    host: '0.0.0.0',
    port: 4000,
    hot: true
  },
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  },
(略)
}

ESLint

めちゃくちゃカスタマイズできる文法チェックツール。 とりあえず airbnb のルールを当ててみる。

$ npm info eslint-config-airbnb@latest peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add --dev eslint-config-airbnb@lates
// eslint.json

{
    "extends": "airbnb",
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
    },
    "rules": {
    }
}

React

みんなだいすきビューライブラリ。

$ yarn add react react-dom

とりあえずそれっぽくコンポーネントつくってみる。

// src/components/hello.jsx

import React from 'react';

const Hello = () => <h1>Hello</h1>;
export default Hello;
// src/components/world.jsx

import React from 'react';

const World = () => <h1>World</h1>;
export default World;
// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

import Hello from './components/hello';
import World from './components/world';

ReactDOM.render(
  <div>
    <Hello />
    <World />
  </div>,
  document.getElementById('app'),
);
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JavaScript Boilerplate</title>
</head>
<body>
  <div id="app"></div>
  <script src="/bundle.js"></script>
</body>
</html>

あとは、http://localhost:4000/ にアクセスすれば変更内容を確認できる。 コンポーネントを修正するとブラウザに内容がリアルタイムで反映される。すごい時代だ。

感想

とりあえずトランスパイラとビルドツールの準備が整い、ES2015 の世界へ飛び込めるようになったので、当初の目的は達成。細かい作法や文法は、ESLint で怒られながら気軽に学べるしなんとかなるでしょ。あと webpack-dev-server はやはり便利だ。

つぎはいよいよ React チュートリアルかな。

参考リンク