未完成【備忘録】Babel 7系で構築するReact開発環境

19650 ワード
babel JavaScript React JavaScript テキストリンク

この記事について

Babel 7系とReactの開発環境構築の個人的な備忘録です。
本記事は、初心者による記事なので、多々間違いがあると思います。何か間違いございましたら、ご教示いただけると幸いです。
なお、本記事は、下記の記事を参考にまとめ記事という認識で、一読いただければと思います。

参照記事

・ React開発環境構築2018
・ Babel@7で構築するReact開発環境

必要なソフト

yarn

node.jsのパッケージマネージャー npm をすごく使いやすくしたもの。

$ npm i -g yarn

※ 公式ドキュメントはhomebrewを推奨しているとのこと。

パッケージ管理できるように、package.jsonを設定。下記コードで、ディレクトリ内に、packageを作成される。

$ yarn init -y

ESLint

ESLint... 難しそうなツールの名前ですが、どうやらjsを実行する前に、バグを修正してくれる便利なツールとのこと。
下記、別記事の参照です。

ESLintとは、JavaScriptのための静的検証ツールです。コードを実行する前にバグを発見したり、括弧やスペースの使い方などのスタイルを統一する。

参照記事：ESLint 最初も一歩

インストールコード

$ yarn add eslint eslint-plugin-react -D

-Dは devDependencies にインストールするためのオプション

フォルダ構造
project/
 ├─node_modules/ ←yarnでインストールしたライブラリが保存されています。
 │  └─...
 ├─.eslintrc.json ←new!
 ├─package.json
 └─yarn.lock ←パッケージのバージョン情報などが保存されています。

下記のReact用の設定をコピーし、 .eslintrc.json に貼り付ける。

.eslintrc.json
{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "no-console":"warn",
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

サーバーを書く

サーバーサイドをnode.jsで書く

Expressの設定

Expressとは、Node.jsで利用できるWebアプリケーションフレームワークのこと。
このサーバーを簡単にセットアップしてくれるExpressをインストールします。

$ yarn add express

詳細は、こちらの記事をご覧ください。

serverフォルダ作りserver.jsを作成します。

フォルダ構造
project/
...
 ├─server/ ←new!
 │  └─server.js ←new!
...
server.js
import express from 'express';

const app = express();

//GETリクエストでルートにアクセスが会った時の動作
app.get('/',(req,res)=>{
  res.send('Hello express');
});

//3000番ポートを使ってサーバーを立ち上げ
app.listen(3000,()=>{
  console.log('app listening on 3000');
});

Reactのインストール

$ yarn add react react-dom

styled-componentsもインストールします。

$ yarn add style-components

※ こちらのパッケージ詳細はこちらをご覧ください。
・これからのReactコンポーネントのスタイリングはstyle-componentsが良さそう

webpackのインストール

webpackのバージョン4からwebpack-cliを別途インストールする必要があります。

$ yarn add -D webpack webpack-cli webpack-dev-server

ビルドする際のモジュールもインストールします。

yarn add -D css-loader uglifyjs-webpack-plugin

Babelの7系のインストール

yarn add -D @babel/preset-env @babel/preset-react @babel/register @babel/plugin-proposal-object-rest-spread

次に、@babel/packageでないbabel系のパッケージをインストールします。

yarn add -D babel-eslint babel-loader babel-plugin-istanbul babel-plugin-styled-components babel-preset-power-assert

eslint, prettierをインストール

構文チェックはeslintに任せ、コードフォーマットはprettierに任せます。

yarn add -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-ally eslint-plugin-react

そして、eslintの設定にprettierのルールをのせます。

yarn add -D prettier eslint-plugin-prettier eslint-config-prettier

test関連

yarn add -D mocha power-assert enzyme enzyme-adapter-react-16 jsdom testdouble

各種設定

Babelの設定

babel.config.js
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      },
      "modules": false
    }],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
  ],
  "env": {
    "test": {
      "presets": ["power-assert"],
      "plugins": [
        ["istanbul", {
          "exclude": ["test/**/*.spec.js"]
        }],
        ["babel-plugin-styled-components", {
          "fileName": false
        }]
      ]
    }
  }
}

他参考記事：Babel7を試してみたメモ

eslintの設定

フォルダ構造
qiita/
 ├─node_modules/ ←yarnでインストールしたライブラリが保存されています。
 │  └─...
 ├─.eslintrc.json ←new!
 ├─package.json
 └─yarn.lock ←パッケージのバージョン情報などが保存されています。

下記をコピーし、使用しましょう。
.eslintrc.jsonを作成して、eslintの設定を行います。

.eslintrc.json
{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "no-console":"warn",
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

他参考記事：ESLint 最初の一歩

Deepin(Linux)でVisual Studioコードを使用してC/C++プログラムをデバッグ
HTML 5のCanvesタグを使って時計の特効を作る