React Typescript가 포함된 웹 패키지

모든 코드를 하나의 모듈에 연결할 수 있는 방법이 있는지 생각해 본 적이 있습니까?만약 그렇다면, 본고에서 모든 코드를 단일javascript 모듈로 묶는 방법을 보여 드리겠습니다. 다른 프로젝트에서 쉽게 사용할 수 있습니다.
따라서 여러 개의 의존 항목 (예를 들어 jquery 등), 이미지, 다양한 스타일의 웹 응용 프로그램을 작성한 다음 코드를 보고 생각하십시오. "클라이언트에서 이 코드를 사용하려면 모든 모듈과 응용 프로그램javascript 파일을 가져와야 합니다. 다행입니다."여기가 바로 웹팩이 구하는 곳입니다.

웹 패키지는 무엇입니까?

Webpack은 JavaScript 응용 프로그램의 정적 모듈 바인딩기입니다.이름에서 알 수 있듯이 Web+pack-는 웹을 위한 단일 패키지를 만드는 것을 의미합니다.따라서 코드를 실행하고 올바른 형식으로 변환하며 브라우저에서 쉽게 실행할 수 있도록 모든 파일을 단일 또는 여러 파일로 묶는 것을 완전히 제어할 수 있는 모든 코드가 필요합니다.본고에서 우리는 클라이언트에 불러오기 위해 웹 팩을 사용하여 React TS 응용 프로그램을 구축하고 설정할 것이다.

항목 설정:

우리는 처음부터 이 프로젝트를 만들 것이다.

1단계: 패키지를 초기화합니다.json
첫 번째 단계는 폴더를 만들고 패키지의 npm init를 사용하여 이 폴더를 초기화하는 것입니다.json 파일.이 항목에 대해 우리는 기본 옵션을 따를 것이다.기본 패키지를 만듭니다.json 파일, 터미널이나 vscode 터미널의 폴더에서 다음 명령을 실행합니다.

npm init --y

-y 명령은 모든 필드의 기본값을 선택합니다.
너도 달리기를 할 수 있다.

npm init

그러나 모든 필드를 수동으로 훑어보고 값을 입력해야 합니다.enter 키를 누르면 모든 값을 건너뛸 수 있습니다.

내가 모든 분야에 대해 "예"라고 말할 때, 나에게 알려 주세요.
나는 - y 파라미터를 더 좋아한다. 왜냐하면 모든 필드에서 같은 파일을 만드는 것이 아니라 명령을 사용할 수 있기 때문이다.
단계 2: 가방에 필요한 가방을 추가합니다.json
우리는 패키지에 다음과 같은 내용을 추가할 것이다.json 파일
개발자 의존 관계

babel(core,env,react,ts,loader)은transcompiler입니다.

크로스 환경은 크로스 플랫폼에서 환경 변수를 설정하는 데 사용됩니다.

html 패키지 플러그인은 html 파일을 만들고 패키지에 서비스를 제공하는 데 사용됩니다.

생성된 단일 페이지에 서비스를 제공합니다.

묶인javascript를 줄이기 위한 간결한 패키지 플러그인입니다.

타자 스크립트

@ 유형 버전 유형/필수 패키지를 확인합니다.

웹팩(핵심,cli,개발 서버)을 웹팩 패키지로 합니다.

의존항

반응

반응dom

소포json

"dependencies": {
  "react": "^16.12.0",
  "react-dom": "^16.12.0"
},
"devDependencies": {
  "@babel/core": "^7.7.7",
  "@babel/preset-env": "^7.7.7",
  "@babel/preset-react": "^7.7.4",
  "@babel/preset-typescript": "^7.7.7",
  "@types/node": "^12.12.5",
  "@types/react": "^16.9.11",
  "@types/react-dom": "^16.9.3",
  "babel-loader": "^8.0.6",
  "cross-env": "^6.0.3",
  "html-webpack-plugin": "^3.2.0",
  "serve": "^11.3.0",
  "terser-webpack-plugin": "^2.3.2",
  "typescript": "^3.7.4",
  "webpack": "^4.41.5",
  "webpack-cli": "^3.3.10",
  "webpack-dev-server": "^3.10.1"
}

3단계: 필요한 스크립트 추가
우리의 웹 패키지가 모든 내용을 묶을 수 있도록 개발 서버나 제품 구축을 만들기 위해 스크립트를 추가해야 합니다.패키지의 스크립트에 다음 내용을 추가합니다.json.

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server",
  "build": "cross-env NODE_ENV=production webpack",
  "start": "serve dist"
},

cross-env는 모든 플랫폼에 환경 변수가 일치하도록 설정합니다.우리는 두 개의 스크립트를 만들 것이다. 하나는 개발에 사용되고, 하나는 생산에 사용된다.우리는 웹 팩dev 서버를 사용하여 개발 패키지를 만들고 웹 팩을 사용하여 생산 구축을 할 것이다.패키지는dist 폴더에 만들어집니다. 개발 또는 생산 버전에서dist 폴더에 서비스를 제공할 수 있습니다.
이것은 소프트웨어 패키지의 설정입니다.json.이 작업이 완료되면 npm 설치를 실행하여 모든 의존 항목을 설치합니다.
4단계: babel 프로필 추가
현재, babel 컴파일러와 웹 팩을 동기화하기 위해서, 우리는 babel의 설정을 추가해야 합니다.이름이 ""인 파일을 만듭니다.babelrc'파일에 다음 내용을 추가합니다.

{
  "presets": ["@babel/env", "@babel/react", "@babel/typescript"]
}

이것은 바벨에게 env,react,typescript 사전 설정을 사용하라고 알려줄 뿐이다.
단계 5: typescript 구성에 tsconfig 추가
tsconfig를 만들어야 합니다.typescript 설정에 사용되는 루트 디렉터리의 json 파일입니다.typescript가 설치되어 있으면 이 파일을 만드는 가장 간단한 방법은

tsc --init

이것은 tsconfig를 추가합니다.json은 루트 디렉터리에 연결되어 모든 설정을 제공합니다.이 프로젝트에 대해 tsconfig를 만들 것입니다.json 파일, 간단한 설정 옵션 추가, 예를 들어

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "jsx": "react",
    "moduleResolution": "node",
    "strict": true,
    "noEmit": true,
    "allowJs": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

typescript 문서에서 가능한 모든 옵션을 볼 수 있습니다. 자세한 정보를 확인하십시오.
단계 6: 패키지 구성
이것은 개발자가 프로젝트에서 만나는 가장 곤혹스러운 설정 옵션 중의 하나이다.우선 웹 팩이라는 파일을 만듭니다.구성다음을 추가합니다.
우선, 플러그인을 가져와야 합니다.우리가 여기서 사용할 두 가지 주요 플러그인은 html 패키지 플러그인과 더욱 간결한 패키지 플러그인이다.파일의 상대적인 경로에서 파일을 읽으려면 path 패키지를 가져옵니다.다음과 같이 가져옵니다.

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");

다음은 다음과 같은 구성 객체를 만듭니다.

const isProd = process.env.NODE_ENV === "production";

const config = {
  mode: isProd ? "production" : "development",
  entry: {
    index: "./src/index.tsx",
  },
  output: {
    path: resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      inject: "body",
    }),
  ],
};

if (isProd) {
  config.optimization = {
    minimizer: [new TerserWebpackPlugin()],
  };
} else {
  config.devServer = {
    port: 9000,
    open: true,
    hot: true,
    compress: true,
    stats: "errors-only",
    overlay: true,
  };
}

module.exports = config;

웹 패키지에서 가장 중요한 옵션은 항목, 출력, 모듈입니다.

이 항목은 응용 프로그램의 입구점을 지정합니다.

지정한 패키지가 구축되어야 하는 위치를 출력합니다.

모듈은 테스트 용례를 지정하여 파일을 분류하고 이 파일에 해당하는 불러오는 프로그램을 사용합니다.이 예에서, 우리는 가지고 있는 파일에babel 불러오는 프로그램을 사용했습니다.tsx 확장.

또한 "dev"와 "prod"조건을 추가했습니다. 지정한 환경이 개발 환경이면 dev 서버에서 실행되고, 생산 환경이면 패키지를 축소합니다.
단계 7: React 추가
마지막으로, 코드에react를 추가해야 합니다.루트 디렉터리에 src 폴더를 추가하고 다음 파일을 만듭니다.

인덱스.html

인덱스.tsx

부록.tsx

파일에 다음 코드를 추가합니다.
지수html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webpack with React TS</title>
  </head>
  <body></body>
</html>

지수회사 명

import React from "react";
import { render } from "react-dom";
import App from "./App";

render(<App />, document.body);

응용 프로그램.회사 명

import React from "react";
const App: React.FC = (props) => {
  return <div>Webpack is cool!</div>;
};

export default App;

8단계: 패키지 서버 실행
npmrun dev: 웹 페이지 dev 서버를 사용하여 dev 서버를 만들고 코드 변경을 감시하며 변경할 때마다 다시 컴파일합니다.

npmrunbuild: 이 명령은 코드를 생성하고 하나의 묶음 파일을 생성하며 생성된 html 파일에 삽입합니다.

npmrunstart: 이 명령은 serve 패키지를 실행합니다. 이 패키지는dist 폴더를 사용하여 정적 페이지를 만들 것입니다.


이렇게우리의 응용 프로그램은 웹 패키지를 설정해서 사용할 수 있다.본문을 쓴 주요 원인은 웹 패키지나 그 어떠한 일반적인 묶음 도구의 작업 원리를 이해하게 하는 것이다.많은 사람들이 하나의 템플릿을 사용해서 5-10분 안에 완성할 수 있다고 말하지만, 관건은 당신이 그것을 사용해서 무엇을 하는지 이해하는 것이다.나는 이것에 대해 많은 문제가 있다. 왜냐하면 나는 이전에 템플릿을 사용했기 때문이다. 그러나 일단 내가 실제 절차의 작업 원리를 알게 되면 이것은 정말 재미있다.