LoginSignup
22

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-05-05

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22