리액트 + 타입스크립트 + 웹팩

21195 단어 reacttypescriptwebpack

업데이트



2021/09/27: Specify html-webpack-plugin version (4.5.2) because the latest versions don't work with listed dependencies in this project.



시스템에 Node.js이 설치되어 있는지 확인하십시오.

01단계



설정 🗂



먼저 디렉토리를 만들고 프로젝트를 초기화하십시오.

mkdir react_typescript_webpack
cd react_typescript_webpack
npm init -y


첫 번째 디렉토리 안에 두 번째 디렉토리를 만들고 src라고 부르십시오. 여기에 소스 코드를 배치할 것입니다.

mkdir src
touch src/index.tsx

index.tsx 라는 응용 프로그램에 대한 진입점도 만듭니다.

종속성 ⛓



종속성은 일반적으로 라이브러리 형태의 또 다른 코드로, 프로젝트를 생성하기 위해 필요합니다.
대략적으로 말하면 두 가지 유형의 종속성이 있습니다.

  • 런타임 종속성: 런타임에 필요한 것으로 일반적으로 코드에서 상호 작용합니다.

  • 빌드 종속성: 프로젝트를 빌드하는 데 사용하는 모든 도구입니다. 대부분의 경우 이러한 유형의 종속성에만 구성을 제공합니다.

    • npm을 패키지 관리자로 사용하므로 이 코드를 package.json
    {
  "name": "react_typescript_webpack",
  "version": "1.0.0",
  "description": "Build UI that scales",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [
    "react",
    "typescript",
    "webpack"
  ],
  "author": "[email protected]",
  "license": "ISC",
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "@types/react": "^16.8.24",
    "@types/react-dom": "^16.0.5",
    "@types/webpack": "4.1.4",
    "ts-loader": "^6.2.1",
    "typescript": "^3.4.3",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}


    이 파일은 프로젝트의 종속성 목록을 유지합니다.
    react 개체에 런타임 종속성( react-dom 및 "dependencies" )을 설정하고 "devDependencies" 개체에 모든 빌드 종속성을 설정합니다.

    Note on @types: they are declaration files used for describing the shape of an existing JavaScript object to TypeScript.



    특정 구성 파일을 사용하여 webpack 명령을 실행하는 "build" 스크립트도 참고하십시오.

    종속성을 설치하려면 다음 명령을 실행하십시오.

    npm install


    02단계



    구성 파일 🧾



    타입스크립트 🎢



    TypeScript로 시작하여 프로젝트 루트 디렉터리에 tsconfig.json 파일을 생성해 보겠습니다.

    touch tsconfig.json




    {
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es5",
    "module": "es6",
    "jsx": "react",
    "noImplicitAny": true,
    "allowSyntheticDefaultImports": true
  }
}


    이 파일은 변환자에게 TypeScript 코드를 JavaScript로 변환하는 방법을 알려줍니다.

    웹팩 📦



    Webpack은 모든 종속성과 함께 코드를 번들이라는 단일 파일에 넣습니다.
    코드를 보고 진입점( index.tsx )에서 시작하여 모든 파일에서 발견된 각 import 명령문에 대해 재귀적으로 모든 종속성을 해결하여 이를 수행합니다.

    웹팩용 설정 파일 생성

    touch webpack.config.js




    const path = require('path');

module.exports = {
    mode: 'none',
    entry: {
        app: path.join(__dirname, 'src', 'index.tsx')
    },
    target: 'web',
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: '/node_modules/'
            }
        ],
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
}

    ts-loader는 webpack이 각 .ts 또는 .tsx 파일에 대해 typescript를 실행하도록 지시하므로 최종 번들에 들어가기 전에 JavaScript로 변환됩니다.

    03단계



    코드 📝



    이제 재미있는 부분!

    앱 🤖



    모두 앱 진입점인 index.tsx 에서 시작합니다.
    우리에게 정말 필요한 유일한 곳react-dom .

    import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.querySelector('#root'));


    기본적으로 우리는 id = 'root'인 HTML 요소의 Render App 구성 요소를 말하고 있습니다.

    App 구성 요소가 아직 없으므로 하나 만들어 보겠습니다.
    항상 src 디렉토리에 있습니다.

    touch App.tsx




    import React from 'react';

export default function App()
{
    return <h1>Hello, world!</h1>
}


    "Hello, world!"를 표시하는 간단한 구성 요소 H1 태그 내부.

    이 시점에서 빌드 명령을 실행하고 번들app.js이 dist 라는 디렉토리에 나타나는 것을 볼 수 있습니다.

    npm run build


    이제 웹 페이지 내부에 포함될 수 있는 앱의 일반 JavaScript 파일이 있습니다.

    웹페이지 🌎


    src 디렉토리에 생성해 보겠습니다.

    touch index.html




    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React Typescript Webpack</title>
</head>
<body>
    <!-- React app root element -->
    <div id="root"></div>
</body>
</html>


    스크립트가 참조되지 않았습니다. 이 파일은 webpack용 플러그인을 사용하는 모든 빌드의 템플릿 역할을 하기 때문입니다.

    html-webpack-플러그인 🔌



    출력 폴더에 번들에 대한 참조가 있는 html 페이지를 자동으로 포함하는 웹팩용 플러그인입니다.

    npm install --save-dev [email protected]


    다음과 같이 webpack.config.js를 편집하십시오.

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

module.exports = {
    mode: 'none',
    entry: {
        app: path.join(__dirname, 'src', 'index.tsx')
    },
    target: 'web',
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: '/node_modules/'
            }
        ],
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html')
        })
    ]
}


    완료!

    이제 히트

    npm run build


    그리고 당신은 갈 준비가되었습니다.

    dist 디렉토리를 통해 웹 앱을 제공하는 서버만 있으면 됩니다.
    더럽지만 빠른 해결책은

    npm i -g live-server
cd dist
live-server


    모든 빌드에서 자동으로 다시 로드되기 때문에 좋습니다.

    꿈의 앱을 작성하고 구성하기 위한 전체 src 디렉토리가 있음을 기억하십시오 ✨ 모든 앱 구성 요소를 components라는 디렉토리에 넣어 명확하게 유지하는 것이 좋습니다.

    나는 당신이 즐겼기를 바랍니다!




    참고문헌
  • React
  • Typescript
  • Webpack
  • html-webpack-plugin
    • 자바 쓰기 소결
    EgretWing의 UI 편집기 대폭 업그레이드

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage