【備忘録①】React & TypeScript & Webpack4 & Babel7 & dev-server の最小構成ボイラープレートの作成
この記事はQiitaの記事をエクスポートしたものです。内容が古くなっている可能性があります。
WebpackとBabelの復習の題材として、最近流行りのReact & TypeScript で最小構成のボイラープレートを作成したので、作成手順と解説を残しておく。
環境
Nodeとnpmは以下の通り。
Node version : 10.15.2 npm version : 6.9.0
使用するnpmモジュール
今回使用するモジュールは以下の通り。（使用するモジュールは全てlatest）
| npmモジュール名 | バージョン | 説明 |
|---|---|---|
| react | 16.8.6 | - |
| react-dom | 16.8.6 | - |
| webpack | 4.35.0 | モジュールバンドラ本体 |
| webpack-cli | 3.3.5 | webpackをコマンドで実行できるようにする |
| webpack-dev-server | 3.7.2 | webpackでの開発サーバーの立ち上げ用 |
| @babel/core | 7.4.5 | トランスパイラ本体 |
| @babel/preset-env | 7.4.5 | トランスパイラ本体 |
| @babel/preset-react | 7.0.0 | React用 |
| @babel/preset-typescript | 7.3.3 | TypeScript用 |
| babel-loader | 8.0.6 | webpackで使用するできるようにする |
| @types/react | 16.8.22 | React用の型定義モジュール |
| @types/react-dom | 16.8.4 | ReactDOM用の型定義モジュール |
プロジェクト基盤の作成
各種ディレクトリとファイルを作成する。 以下の構造を持つプロジェクト基盤を作成する。
. ├── src │ └── index.tsx ├── index.html ├── package.json ├── .babelrc └── webpack.config.js
package.jsonファイルに設定追加とnpmモジュールの追加
使用するnpmモジュールをpackage.jsonに設定する。 ついでにscriptsにwebpack-dev-server起動用コマンドと、ビルド用コマンドを設定する。
{ "name": "react-ts-webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --open", "build": "webpack", "build-prod": "webpack --mode=production" }, "keywords": [], "dependencies": { "@babel/core": "^7.4.5", "@babel/preset-env": "^7.4.5", "@babel/preset-react": "^7.0.0", "@babel/preset-typescript": "^7.3.3", "@types/react": "^16.8.22", "@types/react-dom": "^16.8.4", "babel-loader": "^8.0.6", "react": "^16.8.6", "react-dom": "^16.8.6", "webpack": "^4.35.0", "webpack-cli": "^3.3.5" }, "devDependencies": { "webpack-dev-server": "^3.7.2" } }
package.json作成後、以下のコマンドを実行してnpmモジュールをインストールする。
$ npm install
.babelrcファイルに設定追加
.babelrcファイルにトランスパイラの設定を追加する。 ES6~をES5に変換する @babel/preset-env と、今回対象となる React、TypeScript を用のプリセットを設定する。
{
// プリセットを使用して、ES6 ~ を ES5 に変換
// 今回は React と TypeScript が対象のため、専用のプリセットも追加
"presets": ["@babel/preset-env", "@babel/react", "@babel/typescript"]
}
webpack.config.jsファイルに設定追加
webpack.config.jsファイルに各種設定を追加する。
const path = require('path'); const rules = [{ // 対象とする拡張子を指定 test: /\.tsx?/, // 対象から外すディレクトリを指定 exclude: /node_modules/, // babelを使用する loader: 'babel-loader', }]; module.exports = { // ブラウザ環境で使用するためwebをtargetとする target: 'web', // モード値を production に設定すると最適化された状態で、 // development に設定するとソースマップ有効でJSファイルが出力される mode: 'development', // 起点となるTSXファイル（エントリーポイント） entry: './src/index.tsx', // ビルド後の出力先設定 output: { // 出力先パス path: path.resolve(__dirname, 'build'), // ファイル名 filename: 'bundle.js', }, module: { // ビルド時に使用するルール（上で設定）を設定 rules }, resolve: { // 対象とする拡張子を指定 extensions: ['.ts', '.tsx', '.js'] }, // webpack-dev-serverの設定 devServer: { // 起点となるパス contentBase: './', // ポート番号 port: 5000, }, };
ここまでの設定で使用する準備は完了。
動作確認
動作を確認するためにindex.htmlとindex.tsxの中身を実装する。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>TypeScript App</title> </head> <body> <div id="app-root"></div> <script src="bundle.js"></script> </body> </html>
import React from 'react';
import ReactDOM from 'react-dom';
function App(): JSX.Element {
const sum = (a: number, b: number): number => a + b;
return (
<div>
<h1>React & TypeScript!</h1>
<p>Test: {sum(15, 15)} </p>
</div>
);
}
export default App;
const root = document.getElementById('app-root');
ReactDOM.render(<App />, root);
実装が完了したら、以下のコマンドを実行して開発用サーバー起動することを確認する。
$ npm start
> react-ts-webpack@1.0.0 start /Users/kento/Programing/VScodeProjects/TypeScriptWithModernReact/react-simple-todo-list
> webpack-dev-server --open
ℹ ｢wds｣: Project is running at http://localhost:5000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./
ℹ ｢wdm｣: wait until bundle finished: /
ℹ ｢wdm｣: Hash: 530304f8ddadb1675c93
Version: webpack 4.35.0
Time: 1623ms
Built at: 2019-07-01 16:29:25
Asset Size Chunks Chunk Names
bundle.js 1.23 MiB main [emitted] main
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:5000 ./src/index.tsx 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:5000] (webpack)-dev-server/client?http://localhost:5000 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.77 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.63 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/index.tsx] 420 bytes {main} [built]
+ 29 hidden modules
ℹ ｢wdm｣: Compiled successfully.
起動後、localhost:5000 にアクセスする。
次は、ビルドが実行できるかの確認をする。以下のコマンドを実行する。
$ npm run build
> react-ts-webpack@1.0.0 build /Users/kento/Programing/VScodeProjects/TypeScriptWithModernReact/react-simple-todo-list
> webpack
Hash: 7061f3fb5f989d0481ae
Version: webpack 4.35.0
Time: 942ms
Built at: 2019-07-01 16:27:49
Asset Size Chunks Chunk Names
bundle.js 907 KiB main [emitted] main
Entrypoint main = bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./src/index.tsx] 420 bytes {main} [built]
+ 11 hidden modules
実行後、プロジェクト内を確認すると、build ディレクトリが作成されていることが確認できる。
また、作成されたディレクトリ内にbundle.jsというファイルが作成される。
本番環境用コマンドの動作も確認。 builde.jsのサイズが開発環境用とくらべて小さくなっていることが確認できる。
$ npm run build-prod
> react-ts-webpack@1.0.0 build-prod /Users/kento/Programing/VScodeProjects/ts-react-simple-boiler
> webpack --mode=production
Hash: a86a1e1ae0c669a0f858
Version: webpack 4.35.0
Time: 739ms
Built at: 2019-07-03 20:06:49
Asset Size Chunks Chunk Names
bundle.js 117 KiB 0 [emitted] main
Entrypoint main = bundle.js
[3] ./src/index.tsx 420 bytes {0} [built]
[8] (webpack)/buildin/global.js 472 bytes {0} [built]
+ 7 hidden modules
以上で確認完了。
作成したボイラープレートは こちら
