webpack5でreact + typescriptの環境を作ってみた
きっかけ
最近はフロント側でReact + TypeScriptを触ることが増えてきました。
元々バックエンドでRubyやGoを主戦場としていた為、流れの速いフロント側の実装には二の足を踏んでいたのが本音なのですが、実際の開発ではそうも言ってられないのが現実です。
で、過去にもVueやNuxt.jsなども四苦八苦しながら改修してきていたのですが、ふと「そういえば、フロントの開発環境って自分で構築したことないな」と思い至り、最近は微妙にこれが劣等感を刺激し始めてきました。
その劣等感を解消すべく、webpack5でのReact + TypeScript環境を構築してみました。
とは言っても最後に載せた、参考サイトのサンプルを組み合わせただけではあります。
それでも参考になる人もいるかもしれませんので共有します。
試した環境
mac OS 10.15.6
node 12.8.0
npm 6.10.2
主なファイルの構成
package.json
webpack.config.js
tsconfig.json
src
├── index.html
└── main.tsx
手順
ライブラリインストール
mkdir webpack_sample
cd webpack_sample
npm init -y
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin
この段階で２種類のエラーに遭遇しました。
１つは解消したのですが、もう１つは未解消です。
詳しくは下の
npm install で以下のエラーに遭遇
npm install で以下のエラーに遭遇2（解消せず）
を見てみて下さい。
npm i -S react react-dom @types/react @types/react-dom
設定ファイルを記述
webpack用の設定ファイル、typescript用の設定ファイルの2つ追加し、最後にpackage.jsonを修正しました。
touch webpack.config.js
touch tsconfig.json
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/main.tsx',
output: {
path: `${__dirname}/dist`,
filename: 'main.js'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader'
}
]
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"]
},
target: ["web", "es5"],
plugins: [
new HtmlWebpackPlugin({
title: 'hello react',
template: path.resolve(__dirname, './src/index.html'),
filename: 'index.html',
}),
],
devServer: {
port: 8080,
contentBase: 'dist',
open: true,
hot: true
}
};
tsconfig.json
{
"compilerOptions": {
"sourceMap": true,
"target": "es5",
"module": "es2015",
"jsx": "react",
"moduleResolution": "node",
"lib": [ "es2020", "dom" ]
}
}
package.jsonのscripts部分を以下のように書き換える
package.json
/* ... */
"scripts": {
"build": "webpack",
"start": "webpack serve"
},
/* ... */
ソース
最後にreactのソースを記述します。
mkdir src
touch src/main.tsx
touch src/index.html
src/main.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>
<h1>Hello World</h1>
</div>
);
}
}
ReactDOM.render(<App/>, document.querySelector('#app'));
src/index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<script defer src="main.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
ここまで来たら、下記のコマンドでブラウザが起動し、無事にHello Worldが表示されたら成功。
npm run start
課題
なぜかreactのtsxファイル、今回の例ではmain.tsxを修正してもブラウザには反映されませんでした。
下記に記述した遭遇したエラー2が原因なのかもしれません。
ブラウザをリロードしたらもちろん反映されるのですが・・・
エラー2についてはpython部分をヘタにいじると別の部分に影響があるかもしれず、今回は解消を諦めました。ただ、python2を再インストールすることで直るらしいのですが、前記の理由により今回試していません。
npm install で以下のエラーに遭遇1
gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/Users/takeshimiyajima/.nodenv/versions/12.8.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:344:16)
gyp ERR! stack at ChildProcess.emit (events.js:203:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 19.6.0
gyp ERR! command "/Users/takeshimiyajima/.nodenv/versions/12.8.0/bin/node" "/Users/takeshimiyajima/.nodenv/versions/12.8.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/takeshimiyajima/study/webpack5/test4/node_modules/fsevents
gyp ERR! node -v v12.8.0
gyp ERR! node-gyp -v v5.0.3
gyp ERR! not ok
こちらの方法で解消
npm install で以下のエラーに遭遇2（解消せず）
ERROR:root:code for hash md5 was not found.
Traceback (most recent call last):
File "/Users/takeshimiyajima/.pyenv/versions/2.7.16/lib/python2.7/hashlib.py", line 147, in <module>
globals()[__func_name] = __get_hash(__func_name)
File "/Users/takeshimiyajima/.pyenv/versions/2.7.16/lib/python2.7/hashlib.py", line 97, in __get_builtin_constructor
raise ValueError('unsupported hash type ' + name)
ValueError: unsupported hash type md5
ERROR:root:code for hash sha1 was not found.
python2を再インストールすることで解消できるようですが、諸事情があって私は諦めました。
参考
Discussion