👻

webpack5でreact + typescriptの環境を作ってみた

2020/12/11に公開

きっかけ

最近はフロント側で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

この段階で2種類のエラーに遭遇しました。

1つは解消したのですが、もう1つは未解消です。
詳しくは下の
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

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

参考

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

Discussion