開発環境（React + Stylus + Pug）を作ってみた

Reactを勉強するにあたり、
毎度まいど、開発環境を作るのが非常に面倒くさいです。

そこでgithubに開発初期状態をぶち込み、git cloneするだけで開発環境が構築できるようにしてみました。

Reactの使い方とかそういうのじゃないです。

以下は、環境構築の作業ログです。(githubに記載されてるものと同内容）

環境構築メモ

下準備

yarn init -y
mkdir assets
mkdir assets/css
mkdir assets/jsx
mkdir assets/pug

mkdir public
mkdir public/js
mkdir public/css

React

yarn add -D react react-dom

vi assets/jsx/app.jsx
import React from "react"
import {render} from "react-dom"

class App extends React.Component {
  render() {
    return(
      <p> Hello React!</p>
    )
  }
}

render(
  <App/>,
  document.getElementById('app')
);

Babel

yarn add -D babel-core babel-loader babel-preset-env babel-preset-react

vi .babelrc
{
  "presets": [
    "env", "react"
  ]
}

pug

yarn add -D pug pug-loader

vi assets/pug/index.pug
doctype html
html
  head
    title React + pug + stylus
  body
    h1 Index
    #app

Webpack

yarn add -D webpack webpack-cli html-webpack-plugin

vi webpack.config.js
require('babel-core/register'); // development.jsでES6を使えるようにする
module.exports = require('./development');

vi development.js
import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'

const ast = path.resolve(__dirname, 'assets')
const pub = path.resolve(__dirname, 'public')

export default {
  mode: 'development',
  entry: `${ast}/jsx/app.jsx`,

  output: {
    path: pub,
    filename: 'js/bundle.js'
  },

  module: {
    rules: [
      {
        test: /\.js(x?)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.pug$/,
        loader: 'pug-loader'
      }
    ]
  },

  resolve: {
    extensions: ['.js', '.jsx']
  },

  plugins: [
    new HtmlWebpackPlugin({
      //template: `${ast}/index.html`,
      template: `${ast}/pug/index.pug`,
      filename: 'index.html'                // output時はファイル名、サーバ時はURLのパスになる
    })
  ]
}

確認

yarn webpack

下記のファイルが生成されていれば成功

• public/index.html
• public/js/bundle.js

webpack-dev-serverをインストール

yarn add -D webpack-dev-server

webサーバを立ち上げておくと、動作確認しながら開発できる
ソースコードの更新を検知し、自動でビルドし直してくれて、ブラウザも再読み込みしてくれて便利

yarn webpack-dev-server

localhost:8080 でアクセスしてみると、index.pugで書いた内容とapp.jsxで書いたreact処理が表示されてるハズ

スクリプトとして登録

vi package.json

  // 追記
  },
  "scripts": {
    "build": "webpack"
    "server": "webpack-dev-server"
  }

CSS(stylus)

CSSまわりは割と面倒

yarn add -D stylus stylus-loader style-loader css-loader
yarn add -D extract-text-webpack-plugin@4.0.0-beta.0

extract-text-webpack-plugin はCSSファイルを出力するために必要
@4.0.0-beta.0 はwebpack4の場合に必要（古いextract-text-webpack-pluginだと動かない）

vi assets/css/app.styl
h1
  color: red
p
  font-size: 1.5rem

vi assets/jsx/app.jsx
import css from '../css/app.styl' // 追記

vi development.js
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from "extract-text-webpack-plugin" // 追記

        loader: 'babel-loader'
      },
      // ここから追記
      {
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            "css-loader",
            'stylus-loader',
          ],
        })
      },
      // ここまで
      {
        test: /\.pug$/,

  plugins: [
    new ExtractTextPlugin("css/styles.css"),  // 追記
    new HtmlWebpackPlugin({

確認

yarn build

public/css/styles.cssが生成されてれば成功

yarn server

h1要素が赤い文字で、p要素が大きめに表示されてたら成功