Node.js
react.js
webpack
babel
ECMAScript2015

Node.js + React.js + Babel + Webpack 環境構築

React.js環境構築難しくない?

はい今回は、React.jsをNode.jsで
動かすための環境構築をしていきたいと思います。

  やってきた感想正直言いますとなめてました

極力テンプレにできるような形で環境構築を行なったので、
備忘録+みなさんが苦労しなくてもいいように書きます。
それと、色々とここ最近仕様が変わってるみたい?で
https://qiita.com/yuki_nagahama/items/f64b183e16a6c307e2ee
こういったわりと最近の記事でもerror吐きます。。
上記の記事の差分と言う立場で書いていこうと思います。

環境構築手順

※ Node.jsとnpmは導入したことがあり,
ある程度理解できる前提としてください。

  1. 必要ファイルの作成
  2. 必要パッケージのインストール
  3. webpack.config.jsの書き換え
  4. package.jsonの書き換え
  5. npmを用いたbuildと実行

1. 必要ファイルの作成

react_sample/

|ーー index.html
|
|ーー app.js
|
|ーー webpack.config.js
|
|ーー package.json
|
|ーー dist/

以上のファイルをIDEつかってチャチャッと作成しましょう。
んで、ファイル内容は以下の通り。

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="root"></div>
</body>
</html>
app.js
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

これら以外のファイルは,
ややこしくなるの後に説明します。

2. 必要パッケージのinstall

npm install react
npm install react-dom
npm install --save-dev webpack babel-core babel-loader babel-preset-react babel-preset-es2015
npm install html-webpack-plugin

簡単に説明しますと,
React.jsはbabelを用いて,
ES6をコンパイルしてブラウザが認識できる
ES5にする必要があって, Webpackを用いてブラウザに描画するらしいです。(適当なこと言ってたら指摘お願いします)
なので, babelとWebpackの環境を整えて行く必要があります。

3. webpack.config.jsの書き換え

今は何も書かれていないと思います。
一番の厄介ポイントです!!!!

webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'app.js'),
  //区別しやすいようにdistディレクトリ配下に
  //ビルドした後に生成されるjsファイル名をbundleに
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  //ここの項目を書いていないサイトをそこそこみます
  //これを書かないとlocalサーバが動きません。
  devServer: {
    contentBase: __dirname + './index.html',
    port: 3000,
  },
  resolve: {
    modules: [path.resolve(__dirname, "src"), "node_modules"],
    extensions: ['.js', '.jsx']
  },
  module: {
    //ここがloadersだとビルドの際エラー吐きます.
    //いろんなサイトでloadersと書かれています.
    rules: [
        {
         test: /\.js$/,
         loaders: 'babel-loader',
         query: {
           presets:['react','es2015']
         }
       }
    ]
  },
  //これがないと先ほど作成したHTMLと
  //app.jsがバインドされません
  plugins: [
    new HtmlWebpackPlugin({template: './index.html'})
  ]
};

4. package.jsonの書き換え

ここまでくれば、知ってる人なら簡単かも。
パッケージバージョンによっても
変わるらしいですが, 2018/05/05時点での
最新パッケージをinstallしています。

package.json
{
  "name": "react_sample",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  //追記箇所-実行しやすいように
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"
  },

  "author": "",
  "license": "ISC",
  "dependencies": {
    "eslint": "4.19.1",
    "fs": "0.0.1-security",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "http": "0.0.0",
    "mime": "^2.3.1",
    "path": "^0.12.7",
    "react": "16.3.2",
    "react-dom": "16.3.2",
    "webpack": "4.7.0"
  },
  "devDependencies": {
    "babel-cli": "6.26.0",
    "babel-loader": "7.1.4",
    "babel-preset-env": "1.6.1",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "webpack-cli": "2.1.2",
    "webpack-dev-server": "^3.1.4"
  },
  //追記箇所-babelの設定
  //.babelrcで書くサイトもあるけどこっちを推奨
  //おそらくbabelとreactをバインドする設定
  "babel": {
    "presets": [
      "env",
      "react",
      "es2015"
    ]
  }
}

はい設定は完成です。
手順5に関しては以下のようにすればいいです。

npm run build
npm start

あとはdistディレクトリに
index.htmlとbundle.jsが生成され,
localhost:3000にブラウザでアクセスしたら
ようやく "Hello, world" React.jsに...。
ということで今回は終わりです。

自分も今回初めてReact.jsをNode.jsで動かしたので
もし、理解など違うところがあれば教えてください(懇願)

参考にしたサイトは正直エラー吐かれたので、
あんまりみてないですが、Reactの構造などの理解はしやすいと思います。

参考Webサイト
https://qiita.com/HayneRyo/items/74892d3a37ee96a5df60