REACT CRAを使用せずにプロジェクトを作成(2)

次に、他のタイプのscriptを構成して使用します.
タイプスクリプトに関連するモジュールをインストールします.
//タイプスクリプトを使用した基本モジュール
npm i -g typescript
or
npm i -D typescript
npm i-D@types/react@types/react-dom//reactionが使用するタイプモジュール
npm i-Dts-loader//webspackでタイプスクリプトを使用するモジュール
ts-loaderはtsconfigです.jsonファイルの役割は:
tsconfig.jsonファイルが作成されます.
デフォルトtsconfig.jsonの生成
tsc-init//グローバルインストール時
or
npx tsc-init//ローカルインストール時
tsconfig環境を次のように設定します.

{
    "compilerOptions": {
        "target": "es6", // 자바스크립트 버전 es6=es2015와 같고 현재 es2021까지 지원합니다.
        "module": "commonjs", // 어떤모듈로 생성할지 지정
        "rootDir": "./src", // 소스파일 위치
        "outDir": "./dist", // 배포파일 생성 위치
        "jsx": "react", // jsx 컴파일 방법 지정 (preserve, react, react-native)
        "moduleResolution": "node", // 모듈 해성방법 지정 (classic, node)
        "esModuleInterop": true, // es6와 commonjs간 모듈 호환성을 위해 true로 설정한다.
        "forceConsistentCasingInFileNames": true, // 대소문자를 정확히 구별할지 강제
        "strict": true, // 타입 체킹 동작 활성
        "skipLibCheck": true, // 모든 선언 파일 (.d.ts)의 타입 체킹을 스킵하도록 설정
        "sourceMap": true, // map파일 생성 여부
        "noImplicitAny": true, // <any> 타입을 허가하지 않음         
    },
    "exclude": ["node_modules"],
    "typeRoots": ["node_modules/@types"], //타입 스크립트가 정의되 있는 type을 찾는 위치 include 위치에 있는 .d.ts 파일은 자동으로 인식되므로 추가할 필요 없음
    "include": ["src/**/*"] // 티입 추가 위치
}

既存のwebpack.config.jsファイルを変更するには、次のようにします.

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 번들 파일 생성 위치
const bundlePath = path.resolve(__dirname, 'dist/');
const jsxRegex = /\.(js|jsx)$/; // js, jsx regex
const tsxRegex = /\.(ts|tsx)$/; // ts, tsx regex
//  /\.ts(x?)$/,

module.exports = (_env, argv) => {
    let entryPoints = {
        main: {
            path: './src/index.tsx',
            outputHtml: 'main.html',
            build: true
        },
        config: {
            path: './src/config.tsx',
            outputHtml: 'config.html',
            build: false
        }
    };

    let entry = {};

    // 웹팩 플러그인 추가 구성
    let plugins = [new webpack.HotModuleReplacementPlugin()];

    Object.entries(entryPoints).map(([key, value]) => {
        if (value.build) {
            entry[key] = value.path;
            if (argv.mode === 'production') {
                plugins.push(
                    new HtmlWebpackPlugin({
                        inject: true,
                        chunks: [key],
                        template: './public/template.html',
                        filename: value.outputHtml
                    })
                );
            }
        }
        return null;
    });

    let config = {
        entry,
        optimization: {
            minimize: true // 불필요한 코드 최적화
        },
        devtool: 'source-map', // Webpack의 출력물에서 디버깅을 하기위해 소스 맵을 허용합니다.
        module: {
            rules: [
                {
                    test: tsxRegex,
                    exclude: /(node_modules|bower_components)/,
                    use: [
                        {
                            loader: 'ts-loader'
                        }
                    ]
                },
                {
                    // test: /\.(js|jsx)$/,
                    test: jsxRegex,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env',
                                '@babel/preset-react'
                            ],
                            plugins: []
                        }
                    }
                },
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    loader: 'file-loader',
                    options: {
                        name: 'img/[name].[ext]'
                    }
                },
                // 모든 '.js' 출력 파일은 'source-map-loader'에서 다시 처리한 소스 맵이 있습니다.
                {
                    enforce: 'pre',
                    test: /\.js$/,
                    loader: 'source-map-loader'
                }
            ]
        },
        resolve: { extensions: ['*', '.js', '.jsx', '.ts', '.tsx'] },
        output: {
            filename: '[name].js',
            path: bundlePath
        },
        plugins
    };

    if (argv.mode === 'development') {
        config.devServer = {
            static: './public',
            host: 'localhost',
            // host: '192.168.0.242',
            // host: '0.0.0.0',
            port: 3008,
            historyApiFallback: {
                index: 'index.html'
            },
            hot: true
            // allowedHosts: ['com.arenacast.io'],
        };
        config.performance = {
            hints: false,
            maxEntrypointSize: 512000,
            maxAssetSize: 512000
        };
        config.output = {
            // publicPath: "/",
            path: path.resolve(__dirname, './dist'),
            filename: '[name].js'
        };
    }
    return config;
};

ts-loaderをrulesに追加
resolve-拡張中です.ts, .tsx拡張子の追加
タイプスクリプトを使用してindexモジュールを作成します.
index.tsx

import * as React from 'react';
// import * as ReactDOM from 'react-dom';
import * as ReactDom from 'react-dom/client';

import { Hello } from './components/hello';

const container = document.getElementById('example');
if (!container) throw new Error('Failed to find the root element'); // react18 에서 typescript지원부분 오류로 인한 에러 type업데이트 될때 까지 해당 코드를 사용한다.

// react18에서는 render가 createRoot로 변경
ReactDom.createRoot(container).render(
    <React.StrictMode>
        <Hello compiler="TypeScript" framework="React" />
    </React.StrictMode>
);

react 18の更新に伴い、
いくつかの転換点が現れた
react-dom>react-dom/clientに変更
ReactDom.render > ReactDom.createRoot(container).プレゼンテーションに変更
このコードは、typescriptが一部のエラーをサポートしているため、エラータイプが更新されるまで//react 18で使用します.
if (!container) throw new Error('Failed to find the root element');
やってみる
npm run start
by Kazel