TypeScript 및 Webpack을 사용하여 처음부터 React 프로젝트 만들기

23278 단어 reacttypescriptjavascriptwebpack
TypeScript 및 Webpack 5를 사용하여 처음부터 React 프로젝트를 만드는 방법에 대한 단계별 가이드입니다.

전체 소스 코드는 여기에서 찾을 수 있습니다: https://github.com/alexadam/project-templates/tree/master/projects/react-app

설정



전제 조건:
  • 노드
  • 실

    • 프로젝트의 폴더를 만듭니다.

    mkdir react-app
cd react-app


    yarn을 사용하여 기본 package.json 파일을 생성합니다.

    yarn init -y


    React, TypeScript 및 Webpack 설치:

    yarn add react react-dom

yarn add --dev @types/react \
        @types/react-dom \
        awesome-typescript-loader \
        css-loader \
        html-webpack-plugin \
        node-sass \
        sass-loader \
        style-loader \
        typescript \
        webpack \
        webpack-cli \
        webpack-dev-server


    package.json 파일에 빌드, 개발 및 정리 스크립트를 추가합니다.

     ....
  },
  "scripts": {
    "clean": "rm -rf dist/*",
    "build": "webpack",
    "dev": "webpack serve"
  }


    다음을 사용하여 tsconfig.json 파일을 생성하여 TypeScript를 구성합니다.

    {
  "compilerOptions": {
    "incremental": true,
    "target": "es5",
    "module": "commonjs",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "jsx": "react",
    "sourceMap": true,
    "outDir": "./dist/",
    "rootDir": ".",
    "removeComments": true,
    "strict": true,
    "moduleResolution": "node",            
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "experimentalDecorators": true
  },
  "include": [
    "client"
  ],
  "exclude": [
    "node_modules",
    "build",
    "dist"
  ]
}


    Webpack을 구성하려면 다음을 포함하는 webpack.config.js 파일을 만드십시오.

    const path = require("path");

const app_dir = __dirname + '/client';

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: app_dir + '/index.html',
  filename: 'index.html',
  inject: 'body'
});

const config = {
  mode: 'development',
  entry: app_dir + '/app.tsx',
  output: {
    path: __dirname + '/dist',
    filename: 'app.js',
    publicPath: '/'
  },
  module: {
    rules: [{
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }, {
        test: /\.tsx?$/,
        loader: "awesome-typescript-loader",
        exclude: /(node_modules|bower_components)/
      },
      {
        test: /\.(woff|woff2|ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        exclude: [/node_modules/],
        loader: "file-loader"
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        exclude: [/node_modules/],
        loader: "file-loader"
      },
      {
        test: /\.(pdf)$/i,
        exclude: [/node_modules/],
        loader: "file-loader",
        options: {
          name: '[name].[ext]',
        },
      },
    ]
  },
  plugins: [HTMLWebpackPluginConfig],
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"]
  },
  optimization: {
    removeAvailableModules: false,
    removeEmptyChunks: false,
    splitChunks: false,
  },
  devServer: {
    port: 8080,
    // open: true,
    hot: true,
    inline: true,
    historyApiFallback: true,
  },
};
module.exports = config;


    예제 앱



    프로젝트 폴더에 client라는 폴더를 만듭니다.

    mkdir client
cd client


    number.tsx 파일에서 간단한 React 구성 요소를 만듭니다.

    import React, {useState} from 'react';

interface INumberProps {
  initValue: number
}

const Numbers = (props: INumberProps) => {
  const [value, setValue] = useState(props.initValue)

  const onIncrement = () => {
    setValue(value + 1)
  }

  const onDecrement = () => {
    setValue(value - 1)
  }

  return (
    <div>
      Number is {value}
        <div>
          <button onClick={onIncrement}>+</button>
          <button onClick={onDecrement}>-</button>
        </div>
    </div>
  )
}
export default Numbers


    app.tsx 파일에서 기본 React 구성 요소(진입점)를 만듭니다.

    import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Numbers from './numbers';

ReactDOM.render(
    <Numbers initValue={42} />,
    document.getElementById('app') as HTMLElement
  );


    다음으로 index.html을 추가합니다.

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>React TypeScript</title>
</head>

<body>
  <div id="app"></div>
</body>
</html>


    그런 다음 브라우저에서 실행yarn dev하고 엽니다http://localhost:8080/.

    이 프로젝트를 템플릿으로 사용



    설정 단계를 쉘 스크립트로 저장할 수 있습니다.

    #!/bin/sh

rm -rf node_modules
rm package.json

yarn init --yes

yarn add react react-dom

yarn add --dev @types/react \
        @types/react-dom \
        awesome-typescript-loader \
        css-loader \
        html-webpack-plugin \
        node-sass \
        sass-loader \
        style-loader \
        typescript \
        webpack \
        webpack-cli \
        webpack-dev-server

# Remove the last line
sed -i.bak '$ d' package.json && rm package.json.bak

# append the scripts commads
cat <<EOT >> package.json
   ,"scripts": {
      "clean": "rm -rf dist/*",
      "build": "webpack",
      "dev": "webpack serve"
   }
}


    node-modules 폴더를 삭제하고 새 프로젝트를 시작하려는 경우 react-app의 내용을 새 위치에 복사할 수 있습니다.

    mkdir new-project
cd new-project

# copy the react-app folder content to the new project
rsync -rtv /path/to/../react-app/ .

./init.sh
    오늘 10문제 외워 쓰기...
    RHEL 5.4 openssh OpenSSH 로 승급 가능7.4p 1 버 전 - shell 처리

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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