勉強した内容をメモ。

作業内容

es2016 (ES6) + Webpack + React の開発環境を作成する。

環境構築のためのパッケージ導入

react の開発で利用するパッケージは以下の通り。

名称	説明
webpack	webpack本体
webpack-serve	webpack 開発サーバー。webSocket に依存しているので、古いブラウザには対応していない。
babel-core	es2016 を利用するためのパッケージ
babel-loader	es2016 を利用するためのローダー
babel-preset-react	react で es2016 を利用するためのパッケージ

これらを yarn を使ってインストールする。

# プロジェクトフォルダを作成
mkdir react_sample
cd react_sample
# package.json を作成
yarn init
# 開発と本番で利用するパッケージを導入
yarn add webpack babel-core babel-loader babel-preset-react
# 開発でのみ利用するパッケージを導入
yarn add webpack-serve webpack-cli --dev

次にプロジェクトルートに webpack.config.js という名前で以下のファイルを作成する。

var docRoot = __dirname + '/public';

// module.exports に代入したオブジェクトは別ファイルから参照可能になる。
module.exports = {
  // mode は 開発の場合には "development"、本番では "production" を設定する。  
  mode: 'development',
  // エントリポイント（プログラムの開始時に呼び出されるコード）を指定する。
  entry: [
    './src/index.js',
  ],
  // コンパイル後の JS ファイルの出力先を指定
  output: {
    path: docRoot,
    publicPath: '/',
    filename: 'bundle.js'
  },
  // ローダーモジュールによる前処理などを記述
  module: {
    rules: [{
      exclude: /node_modules/,
      // ローダーの処理対象を正規表現で指定
      test: /\.jsx?$/,
      // ローダー名の指定やオプションなどの設定
      use: [{
        // babel ( ES6 ) で react のコードを書く。と言う設定を記述
        loader: 'babel-loader',
        options:{
          presets: ['react', 'es2015']
        }
      }]
    }],
  }
  // require 構文で指定するファイルの拡張子を設定する
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

次に、webpack.config.js で指定している入力先と出力先を作成する。

cd ./react_sample
# src を作成
mkdir src
# src/index.js には alert 関数を呼び出す処理を記述
echo 'alert("Hello World!");' > src/index.js
# public を作成
mkdir public

public/index.html には、以下のHTMLファイルを作成する。

<!DOCTYPE html5>
<html>
  <head>
    <title>Hello World</title>
    <meta charset='UTF-8'>
    <script type="text/javascript" src="./bundle.js"></script>
  </head>

  <body>
    <p>react_sample</p>
  </body>
</html>

これで webpack の使用準備が整ったので、あとは package.json に起動用の scripts 記述を追加する。
以下の記述の scripts 部分を追加する。

{
  "name": "react_sample",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.6.0"
  },
  "devDependencies": {
    "webpack-cli": "^2.0.14",
    "webpack-serve": "^0.3.1"
  },
  "scripts": {
    "build": "webpack",
    "serve": "webpack-serve --config webpack.config.js --open-path ./public"
  }
}

package.json に scripts を記述しておけば、npm run <script-name> で scripts 記述の右辺側のコマンドを実行してくれる。
例えば、npm run serve とすれば、"webpack-serve --config webpack.config.js --open-path ./public" が実行される。

# webpack-serve を起動する
npm run serve

これで localhost:8080 でローカルサーバーが立ち上がる。
また、webpack-serve は live-reload という機能がついており、src/index.js を編集すると、自動的に再コンパイルされて結果が更新される。

これで開発サーバーの立ち上げは出来たが、webpack-serve は public/bundle.js を生成しない。
bundle.js を生成したい場合は webpack コマンドを実行する必要がある。

npm run build

eslint の導入

JavaScript の構文チェックツール eslint を導入する。

#  eslint と react 用の eslint プラグインをインストール
yarn add --dev eslint eslint-plugin-react
# 設定ファイルを作成する
eslint --init

eslint --init を実行すると対話コンソールが表示される。

あとは ./node_modules/.bin/eslint で検査対象のファイルに構文チェックを実行できるようになる。

ただし、init直後では console.log や document.onload など、ブラウザでの実行を想定した変数が全てエラーになるので
.eslintrc.json を開き、module.exports で外部公開する連想配列に以下の内容を追加する。

"env": {
  "browser": true,
}

sass の導入

sassも導入する。
2018年4月の段階では、extract-text-webpack-plugin の安定板は webpack v4 に対応していないので、開発版の next バージョンをインストールする必要がある。

yarn add --dev node-sass style-loader css-loader sass-loader import-glob-loader extract-text-webpack-plugin@next

次に、webpack.config.js で module.exports している連想配列に以下を追加する。

  {
    mode: 'development',
    entry: [
      './stylesheets/index.scss',
    ],
    output: {
      path: docRoot,
      publicPath: '/',
      filename: 'bundle.css',
    },
    module: {
      rules: [
        { 
          //
          test: /\.css$/,
          use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
        },
        {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader' }),
        },
      ],
    },
    plugins: [
      new ExtractTextPlugin('bundle.css'),
    ],
  },

これで stylesheets/index.scss を public/bundle.css に変換できるようになる。

react の導入

最後に React を導入する。

yarn add react react-dom

react は web向けやモバイル向けのものが存在しており、react プラグインは共通で利用されるパッケージ、react-dom はweb で利用されるパッケージになっている。

jshitaの日記

勉強したことを書いていきます。

react + redux の勉強１：環境構築

作業内容

環境構築のためのパッケージ導入

eslint の導入

sass の導入

react の導入