Hero img
React Webpack Typescript

作成日:2023-09-07 ・更新日:2023-11-22

Tags: React typescript

Reactとwebpackとtypescriptの環境を整える。

Reactでcreate-react-appを使わず、webpackでReactのプロジェクトを作成します。そして、Typescriptを追加して、tsxファイル等も使えるように設定していきます。

目次

  • 目標
  • 使う
  • インストールして使う
  • 解説編
  • 必ず必要な初期設定
  • ファイルを用意する
  • フォルダー構成
  • webpack.config.js
  • npm run startで起動するために
  • Reactを使う
  • Typescript
  • Typescriptをインストール
  • ファイルの変更　　
  • 設定ファイルの修正
  • まとめ

目標

React WebPack Typescript環境を実現する。

使う

React WebPackを使うために

  1. 1.webpackをダウンロード
  2. 2.Reactのダウンロード
  3. 3.ローダーのダウンロード
  4. 4.ファルダ―とファイルの追加
  5. 5.webpack.configの修正。
  6. 6.package.jsonにスクリプトを追加

インストールして使う

ここでの最終フォルダー構成です

├─node_modules
├─public
│	├──index.html
│	
├index.tsx
├package-lock.json
├package.json
├tsconfig.json
├webpack.config.js
  1. 1.適当なところにReact用のフォルダーを作成し、npmの初期設定をします。
mkdir testwebpack
cd testwebpack
npm init -y
  1. 2.webpackをインストールします。
npm install webpack-cli webpack-dev-server webpack
  1. 3.Reactとbabelをインストールします。
npm install react react-dom
npm install babel-loader @babel/core @babel/preset-env @babel/preset-react
  1. 4.Typescriptをインストールします。
npm install typescript
npx tsc --init
npm install @babel/preset-typescript  @types/react @types/react-dom
  1. 5.tsconfig.jsonに一行追加
tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",//<追加
    //...省略
  }
}
  1. 6.フォルダー作成と、jsファイルを作成します。
index.htmlファイル
index.html
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack React</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
  </body>
</html>
index.tsxファイル
index.tsx
import React from "react";
import { createRoot } from "react-dom/client";
import App from"./src/App";

const root = createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <App />    
);
App.tsxファイル
App.tsx
import React from 'react';
function App(){
  return (
<p>ABCD</p>
  );
}
export default App;

フォルダー構成

├─node_modules
├─public
│	├──index.html
│	
├─src
│ ├──App.tsx
├index.tsx
├package-lock.json
├package.json
├tsconfig.json
├webpack.config.js
  1. 7.webpack.config.jsファイルを作成し、設定を書き込みます。 webpack.config.jsをプロジェクトルートに作成して、設定を書きます。
webpack.config
const path = require('path');
module.exports = {
    entry: './index.tsx',
    mode: 'production',
    performance: { hints: false } ,
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js',
    },
    target: 'web',
    devServer: {
        port: '5000',
        static: {
            directory: path.join(__dirname, 'public')
        },
        open: true,
        hot: true,
        liveReload: true,
    },
      resolve: {
    extensions: ['.tsx', '.ts', '.js' , '.json'],
  },
    module: {
        rules: [
          {
            test: /\.(js|mjs|cjs|tsx|ts|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ["@babel/preset-env", "@babel/preset-react", '@babel/preset-typescript']
              }
            }
          }
        ]
      }
};
  1. 8.package.jsonにスクリプトの追加
    sccipts内にstartとbuildを追加
package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server .",
    "build": "webpack ."
  },
  1. 9.起動またはビルドする。
npm run start 
npm run build

解説編

解説のために、一旦Reactを私用せずプレーンのHTMLとJSのみをwebpackでまとめて見ます。

必ず必要な初期設定

webpackを使うためにインストールするものが3つ。
とりあえずこの3つをインストールします。

npm init
npm install webpack-cli webpack-dev-server webpack
  • webpack :webpack本体
  • webpack-cli : webpackをコマンドで実行させるコントローラー役
  • webpack-dev-server :開発用ウェブサーバー

これだけで、webpackを一応使う事ができます。
プレーンのHTMLとjsを用意して試してみます。

ファイルを用意する

webpackを使うために、webpack.config.jsを用意します。

webpack.config.js
const path = require('path');
module.exports = {
    entry: //起動する場所
    mode: //開発 or デプロイ?
    output: {
        path: //出力場所
        filename://出力ファイル名
    },
    target: //web or node else...
    devServer: {//開発用サーバー起動
        port: //ポート
        static: //ダイレクトで読み取るところ
        open: //起動時ブラウザー開く？
        hot: //ファイル更新時、自動で読み込む？
        liveReload: //ブラウザーリロードする？
    },
};

必要な設定は、どのファイルを読み込むのか？どこに出力するのかを決めてあげる必要があります。

フォルダー構成

├─node_modules
├─public
│	├──index.html
│	
├index.js
├package-lock.json
├package.json
├webpack.config.js

ファイルの中身

index.html
index.html
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack React</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
  </body>
</html>
index.js
index.html
console.log("Webpack???")

const hellow = document.createElement("p");
hellow.innerText = "Hello World!";

const app = document.getElementById("root");
app.appendChild(hellow);

webpack.config.js

webpack.config.jsに設定情報を書き書きします。

webpack.config.js
const path = require('path');
module.exports = {
    entry: './index.js',//<--index.jsを実行して
    mode: 'production',//<--デプロイ用なのでファイル中身読めなくてOK
    output: {
        path: path.resolve(__dirname, './build'),//<--buildフォルダーに
        filename: 'bundle.js',//<--まとめたjsファイル名はbundle.jsにして。
    },
    target: 'web',//<--このプロジェクトweb用です。
    devServer: {//開発用サーバー
        port: '5000',//ポートは5000を使用して
        static: {
            directory: path.join(__dirname, 'public')//publicフォルダーをルートフォルダにします。
        },
        open: true,//webpack-dev-server起動時にブラウザー起動して
        hot: true,//ファイルが更新されたら自動的に読み込んで
        liveReload: true,//ファイル更新されたらブラウザーでリロードして
    },
};
起動コマンド
webpack .

この設定で、webpackを起動するとbuildフォルダーにbundle.jsが生成されます。
先ほどのindex.htmlをbuildフォルダーにコピーして、ブラウザーで確認すると、Hellow World!が表示されます。

index.html

index.htmlはbuildフォルダーに自動的にコピーされません。そのため手動でコピーする必要があります。(プラグインで自動化可)

npm run startで起動するために

npm run startとかで起動するために、package.jsonにコマンドを追加します。 ここに追加することによってnpm run startやnpm run buildを使う事ができます。

package.json
{
  "name": "initwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server .",//<--これ ※コメント削除してね
    "build": "webpack ."//<--これ　※コメント削除してね
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

ここまでをgitでダウンロードする

Reactを使う

webpackでプレーンのjsに対して、パッケージ化することができましたが、
Reactを使う為にはその他の物も必要になります。

Reactが使えるようにreactとreact-domをインストール

npm install react react-dom

reactを読み込めるようにモジュールをインストール

npm install babel-loader @babel/core @babel/preset-env @babel/preset-react

そして、webpack.config.jsも修正します。

webpack.config.js
const path = require('path');

module.exports = {
    entry: './index.js',
    mode: 'production',
    performance: { hints: false } ,//<--追加
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js',
    },
    target: 'web',
    devServer: {
        port: '5000',
        static: {
            directory: path.join(__dirname, 'public')
        },
        open: true,
        hot: true,
        liveReload: true,
    },
    //module周りを追加。
    module: {
        rules: [
          {
            test: /\.(js|mjs|cjs)$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ["@babel/preset-env", "@babel/preset-react"]
              }
            }
          }
        ]
      }
    //ここまで
};

App.jsを追加

まずindex.jsをReact用に修正します。

index.js
import React from 'react';
import App from './src/App';
import { createRoot } from 'react-dom/client'
createRoot(document.getElementById('root')).render(<App/>,);

srcフォルダーを作成し、App.jsを追加する。

./src/App.js
import React from 'react';
function App(){
  return (
<p>ABCD</p>
  );
}
export default App;

これで一旦Reactが使えるようになりました。 ここまでをgitでダウンロードする

Typescript

Typescriptを使用するには、Typescriptをインストールし、ちょこちょこ修正するところがあります。 またここでは@babelと言うものを使っていますが、これとは別にeslint-loaderや、ts-loaderもあります。
この辺は併用しても可能であるが問題が多々発生するのでどうしたものか...

Typescriptをインストール

npm install typescript
npx tsc --init
npm install @babel/preset-typescript  @types/react @types/react-dom

ファイルの変更　　

まずindex.jsをindex.tsxにリネームし、typeエラー発生してしまうので少し手を加えます

index.tsx
import React from "react";
import { createRoot } from "react-dom/client";
import App from"./src/App";

const root = createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <App />    
);

これでもまだエラーが発生しているので、他のファイルも修正して行きます。

設定ファイルの修正

Reactはtsxのファイル形式を使用するので、typescript.configにjsxファイル形式を使いますと宣言します。

tsconfig.json
{
  "compilerOptions": {
   "jsx": "react",
   //省略
  }
}

Webpackconfig.jsの修正

エントリーがindex.jsとなっているのでこれを先ほど修正した、index.tsxに書き換えます。 またresolveを追加し、loaderも追加修正します。

module.exports = {
  entry: './index.tsx',//修正
  resolve: {//追加
    extensions: ['.tsx', '.ts', '.js' , '.json'],
  },
},
module: {
        rules: [
          {
            test: /\.(js|mjs|cjs|tsx|ts|jsx)$/,//ts tsx等
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ["@babel/preset-env", "@babel/preset-react", '@babel/preset-typescript']//追加
              }
            }
          }
        ]
      }

ここまでをgitでダウンロードする

まとめ

Reactでcreate-react-appを使用せず、webpackとtypescriptを追加して、Reactを使用できる環境が出来ました。

create-react-appを使わないことによる恩恵はあまり感じられていないのだが、webpack.configを直で修正できる＝何かあっても対処できる可能性がある。となるが、正直webpackの設定が大変「私はコピペするだけになっている」。　　

正直コマンド一行でreactの設定が完了するcreate-react-appのありがたさを感じます。 しかし、最近create-react-appが　非推奨になるとかならないとか。覚えておいて損はないのか？　非推奨になりました。Reactをやるのであればwebpackではなく、next.jsやgatsbyのフレームワークを覚えた方がいいのではないだろうか。

目次

  • 目標
  • 使う
  • インストールして使う
  • 解説編
  • 必ず必要な初期設定
  • ファイルを用意する
  • フォルダー構成
  • webpack.config.js
  • npm run startで起動するために
  • Reactを使う
  • Typescript
  • Typescriptをインストール
  • ファイルの変更　　
  • 設定ファイルの修正
  • まとめ

関連記事

react-cookie

2022-12-13

Reactでクッキーを使う
prebuild

2023-05-29

npm build前にスクリプトを起動する
modules-css

2024-04-05

NextjsはCSS Modulesを使うことにした
reacct-tailwind-emotion2

2022-09-21

ReactとTailwind CSS、Emotionを使ったWebサイト開発の実践的なテクニック
reactstate

2022-09-06

Reactのstateと仲良くなるために
react-table

2023-08-29

React-table V8

コメント

コメントを書く

質問や、間違いがありましたら、お気軽にどうぞ

※お名前とコメントの内容を入力してください。
※全てこのブログ上に公表されます。
※許可なく管理者によって修正・削除する場合がございます。 詳しくはプライバシーポリシーを参照ください