Reactの環境構築 (ES2015)

12048 ワード
es2015 React babel webpack webpack テキストリンク

Reactの環境開発でだいぶつまずいたのでメモ

環境

node 8.11.1
npm 5.7.1

構築手順

作業ディレクトリの作成

mkdir react-sample && cd $_

package.jsonを生成します

npm init -y

以下のように生成されます

package.json
{
  "name": "react-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

babelのパッケージをインストールします
-Dは--savedevでもいい。devDependenciesに自動的に記録されます。

$ npm i -D babel-core babel-loader babel-preset-env babel-preset-react babel-preset-es2015

babelの設定ファイルを作成

touch .babelrc

.babelrcは以下のように作成

{
  "presets":["es2015"]
}

ソースコードを入れるディレクトリとコンパイル後のコードを入れるディレクトリを作成します

mkdir src dist

webpackとwebpack-cliをインストールします。

$ npm i -D webpack webpack-cli

webpack.config.jsの作成

touch webpack.config.js

webpack.config.jsは以下のように作成します。

webpack.config.js
module.exports = {
  mode: "development",

  entry:__dirname + '/src/app.js',
  output: {
    path:__dirname + '/dist',
    filename:'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader:'babel-loader',
            options:{
              presets:[
                ['env',{'modules':false}],
                'react'
              ]
            }
          }
        ]
      }
    ]
  }
};

reactのパッケージのインストール

npm i -S react react-dom

Reactのコードをかきます

touch src/app.js

app.jsは以下のように作成します

app.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'

class App extends Component {
  render() {
    return (
      <h1>Hello world!</h1>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('main')
)

htmlファイルを用意します

touch index.html
index.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>React-sample</title>
    </head>
    <body>
        <div id="main"></div>
        <script src="./dist/bundle.js"></script>
    </body>
</html>

コマンドでビルドできるように設定します

package.json
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build:dev": "webpack --mode development",
  "build:pro": "webpack --mode production"
},

npm run build:devでビルドできるようになりました
次にwebpack-dev-serverをインストールします。
以下のコマンドを入力します。

npm i -D webpack-dev-server

これもコマンドで動かすことができるように設定します。

package.json
"scripts": {                                                                                  
  "test": "echo \"Error: no test specified\" && exit 1",
  "build:dev": "webpack --mode development",
  "build:pro": "webpack --mode production",
  "start": "webpack-dev-server --mode development"
}

npm startでserverを動かすことができます。
ビルドしたあとにnpm initすることで以下のような画面になります

以上で完成です