node express + react 開発環境作成手順(自分メモ)
サーバアプリは “node” + “express"、クライアントアプリには "React” を使用した場合の開発環境を構築した時の手順を記載します。あくまでも自分用メモです。
概要
大体の構成
サーバ:
”node" + “express"。クライアント:
“React"。クライアントのビルドに "webpack"。JSトランスパイラは "babel"。その他 CSS のビルドに "style-loader"、また、ビルドしたReact JSファイルを読み込む index.htmlを生成してくれるプラグインには "html-webpack-plugin” を利用する。
大まかな流れ
- node + express-generator をインストール
- express 開発環境を作成
- react インストール
- webpack 導入
- babel 導入
- style-loader 導入
- html-webpack-plugin 導入
サーバアプリ開発環境の構築
1) node + express-generator をインストール
最初に node をインストール。nodebrew を使用すると吉。
続いて、express-generator をグローバルにインストール。
$ npm install express-generator -g
2) express 開発環境を構築
express-generator でサーバアプリ開発環境の雛形を作成。
今回は、HTMLテンプレートエンジンに “pug” を指定。(実際は使用しないかもしれないけど一応あると便利かも)
$ express [app-name] --view=pug
これで、[app-name] ディレクトリ配下に、node + express 開発環境の雛形が生成され、最低限のサーバアプリ開発環境ができた。あとは、自分の必要に応じて、".gitignore" などを作ったり、EsLint のセットアップをすること。
クライアントアプリ開発環境を追加する
3) reacインストール
$ npm install --save react react-dom
4) webpack 導入
$ npm install --save-dev webpack
5) Babel を導入
# webpack から babel を利用する場合の基本モジュール $ npm install --save-dev babel-loader babel-core # React をとトランスパイルするモジュール $ npm install --save-dev babel-cli babel-preset-react # Es2015 をトランスパイルするためのもの $ npm install --save-dev babel-preset-es2015
babel の設定ファイル “.babel.rc” を作成
$ echo '{ "presets": ["react", "es2015"] }' > .babelrc $ cat .babelrc { "presets": ["react", "es2015"] }
ここで、babel で js をトランスパイルするための webpack 設定をおこなう。
$ vim webpack.config.js
ここまでの webpack.config.js の中身は次のとおり。
var path = require('path'); module.exports = { entry: './client/src/app.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'public') }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' } ] } };
6) style-loader 導入
$ npm install --save css-loader
webpack.config.js に下記の loader を追加。
module: { { test: /\.css$/, exclude: /node_modules/, loader: ['style-loader', 'css-loader'], }, ], },
7) html-webpack-plugin 導入
$ npm install -save-dev html-webpack-plugin
index.html の元となるテンプレ “client/template/index.ejs” を作成。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id='app'></div> </body> </html>
あとは、webpack.config.js に html-webpack-plugin の設定を追加する。
plugins: [ new HtmlWebpackPlugin({ title: 'ngzm uploader', template: './client/template/index.ejs', }), ],
まとめ
最終的な webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './client/src/App.jsx', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'public'), }, devtool: 'inline-source-map', module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', }, { test: /\.css$/, exclude: /node_modules/, loader: ['style-loader', 'css-loader'], }, ], }, plugins: [ new HtmlWebpackPlugin({ title: 'ngzm uploader', template: './client/template/index.ejs', }), ], resolve: { extensions: ['.js', '.jsx'], }, };
なお今回は、"webpack-dev-server" は利用していませんが、これも便利そうなので次回は導入したいと思います。
参考
- Installation - React
- Babel · The compiler for writing next generation JavaScript
- React x Webpackプロジェクトの雛形を作る
- 最新版で学ぶwebpack 3入門 - JavaScript開発で人気のバンドルツール - ICS MEDIA
- Using the HTML Webpack Plugin for generating HTML files
以上。