Zenn
💻

create-react-appを使わずにreact×typescriptの環境構築する方法

2023/03/26に公開
React
Sass
TypeScript
webpack
tech

手順

  1. 環境構築をするフォルダを作成
  2. プロジェクトの初期設定
  3. 各種必要なものをインストール
  4. 各種ファイルの設定
  5. reactのコードを実装
  6. ブラウザで確認

環境構築をするフォルダを作成

今回はデスクトップにreact_webpackというフォルダを作成しました。

プロジェクトの初期設定

先ほど作成したフォルダをvscodeで開き、初期設定を行っていきます。
下記コマンドをターミナルで実行すると、いくつか質問されるのですが、全て何も入力せずにエンターを押します。するとフォルダ内にpackate.jsonというファイルが作成されます。
初期設定はこれで以上です。

terminal
npm init

各種必要なものをインストール

下記コマンドで必要なものをインストールします。

terminal
npm install react react-dom @types/react @types/react-dom webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react typescript ts-loader sass css-loader style-loader sass-loader

各種ファイルの設定

各種ファイルの設定を行っていきます。

webpackの設定

以下のコマンドを実行します。

terminal
npx webpack init

いくつか質問されるので、以下の通り回答してください。

terminal
[webpack-cli] For using this command you need to install: '@webpack-cli/generators' package.
[webpack-cli] Would you like to install '@webpack-cli/generators' package? (That will run 'npm install -D @webpack-cli/generators') (Y/n) y
? Which of the following JS solutions do you want to use? Typescript
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? No
? Do you want to add PWA support? No
? Which of the following CSS solutions do you want to use? SASS
? Will you be using CSS styles along with SASS in your project? Yes
? Will you be using PostCSS in your project? No
? Do you want to extract CSS for every file? No
? Do you like to install prettier to format generated configuration? No
? Pick a package manager: npm
? Overwrite package.json? overwrite

これが完了するとフォルダ内にwebpack.config.js,src/index.tsが作成されます。

次にwebpack.config.jsの中身を以下のように書き換えます。

webpack.config.js
// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require('path');

const isProduction = process.env.NODE_ENV == 'production';


const stylesHandler = 'style-loader';



const config = {
    entry: './src/index.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    devServer: {
        open: true,
        static:{
            directory: path.join(__dirname, "dist")
        },
        host: 'localhost',
        port: 3000,
    },
    plugins: [
        // Add your plugins here
        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
    ],
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/i,
                exclude: ['/node_modules/'],
                use: [
                    {
                        loader: "babel-loader",
                        options: { presets: ['@babel/preset-env', '@babel/react'] },
                    },
                    {
                        loader: 'ts-loader',
                        options: {
                            configFile: path.resolve(__dirname, 'tsconfig.json'),
                        },
                    },
                ]
            },
            {
                test: /\.css$/i,
                use: [stylesHandler, 'css-loader'],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [stylesHandler, 'css-loader', 'sass-loader'],
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                type: 'asset',
            },

            // Add your rules for custom modules here
            // Learn more about loaders from https://webpack.js.org/loaders/
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
    },
};

module.exports = () => {
    if (isProduction) {
        config.mode = 'production';


    } else {
        config.mode = 'development';
    }
    return config;
};

書き換えたらターミナルで以下のコマンドを実行します。

terminal
npm run build:dev

実行するとフォルダ内にdistというフォルダが作成され、その中にbundle.jsというファイルが作成されます。
今作成されたdistフォルダの中にindex.htmlというファイルを作成し、中身を以下の通り書き換えます。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer src="./bundle.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

tsconfig.jsonの設定

tsconfig.jsonの中身を以下の通りに書き換えます。

tsconfig.json
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "allowJs": true,
    "jsx": "react"
  },
  "files": ["src/index.tsx"]
}

reactのコードを実装

まず、index.tsxの中身を以下の通りに書き換えます。

index.tsx
import React from 'react'
import ReactDOM from "react-dom/client"
import App from "./App"


const root = ReactDOM.createRoot(
    document.getElementById("root")
);

root.render(
    <React.StrictMode>
        <App></App>
    </React.StrictMode>
)

次にsrcフォルダの中にApp.tsxファイルを作成し、中身を以下の通りに書き換えます。

App.tsx
import React from 'react'

const App = () => {

  return (
    <div>Hello world!!</div>
  )
}

export default App

ブラウザで確認

ターミナルで以下のコマンドを実行すると自動でブラウザが立ち上がり、localhost:3000にアクセスします。

terminal
npm run serve

画面にHello world!!と出れば成功です。

Discussion