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 iで２種類のエラーに遭遇しました。
１つは解消したのですが、もう１つは未解消です。
詳しくは下の
npm install で以下のエラーに遭遇1
npm install で以下のエラーに遭遇2（解消せず）
を見てみて下さい。

エラーが出なかった場合は下記を続けてください。

npm i -S react react-dom @types/react @types/react-dom

ここまでで必要なライブラリのインストールが完了しています。
あとは設定ファイルを記述していきます。
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": {
 "build": "webpack",
 "start": "webpack serve"
},
/* ... */

package.jsonはこれまでの手順出来ていると思うので、script部分だけ置き換えてください。

ソース作成

以下のようにsrc/main.tsxと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>

実行

npm run start 

​
でブラウザが起動し、無事にHello Worldが表示されたら成功。

課題

なぜかreactのtsxファイル、今回の例ではmain.tsxを修正してもブラウザには反映されませんでした。
下記に記述した遭遇したエラー2が原因なのかもしれません。
ブラウザをリロードしたらもちろん反映されるのですが・・・

エラー2についてはpython部分をヘタにいじると別の部分に影響があるかもしれず、今回は解消を諦めました。ただ、python2を再インストールすることで直るらしいのですが、前記の理由により今回試していません。

参考

https://ics.media/entry/12140/
https://ics.media/entry/16329/
https://www.taniarascia.com/how-to-use-webpack/

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

こちらの方法で解決できました！
https://qiita.com/rizumi/items/02c12894f75f8f9d9296


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を再インストールすることで解消できるようですが、諸事情があって私は諦めました。



この記事が気に入ったらサポートをしてみませんか？