この記事について
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 に貼り付ける。
{
"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!
...
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の設定
{
"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の設定を行います。
{
"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 最初の一歩