React 앱을 만드는 더 나은 방법

8715 단어 beginnersreacttoolingwebdev
React를 사용해 본 적이 있다면 적어도 한 번은 create-react-app를 사용했을 가능성이 있습니다. 운이 좋았는데 그렇지 않은 경우 방법은 다음과 같습니다.

다음과 같은 내용을 실행합니다.

npx create-react-app my-app


그리고 다음 콘솔 출력을 관찰하십시오.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1394 packages in 44s

209 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 55 packages in 4s

209 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1449 packages in 3s

209 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities


예, 거의 150,000개의 패키지와 약간의 취약점이 있습니다.

무서운 거 보고 싶어? 폴더 크기 확인:

du -hc -s  node_modules
# 318M  node_modules


이것이 따라온 것도 당연합니다.


왜 이것이 권장되는 방법인지 의아해하지만 다행스럽게도 이것이 유일한 방법은 아닙니다.

올인원: VITE



Vite은 TypeScript를 사용하거나 사용하지 않는 React를 포함하여 여러 프레임워크에 대한 사전 설정이 있는 번들러 및 개발 서버가 포함된 배터리입니다.

Vite 실행으로 앱을 생성하려면:

npm create vite@latest my-vite-react-app
# ✔ Select a framework: › react
# ✔ Select a variant: › react
#
# or
#
npm create vite@latest my-vite-react-app -- --template react


폴더로 이동하여 종속성을 설치합니다.

cd my-vite-react-app && npm install


훨씬 빠르고 덜 탐욕스러웠습니다.

added 87 packages, and audited 88 packages in 5s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


그리고 거의 10배 적은 공간도 필요합니다.

du -hc -s  node_modules
# 37M   node_modules


제공하는 모든 기능으로 create-react-app을 대체해야 하는 경우 여기에서 읽기를 중단할 수 있습니다. 그것은 vite보다 나아지지 않습니다.

단순성을 희생하면서 더 나아가고 싶은 분들을 위해 대안이 하나 더 있습니다 😎

니드 포 스피드: esbuild



CRA(create-react-app)와 vite의 내부를 좀 더 자세히 살펴보겠습니다. 둘 다 함께 작동하도록 구성된 다양한 도구 세트입니다. CRA는 webpack에 의존하여 파일을 묶는 반면 vite는 좀 더 현대적인 것rollup을 사용합니다. 그러나 그것들은 모두 JavaScript로 작성되었으므로 NodeJS 스크립트 자체의 성능에 의해 제한됩니다.

Enter esbuild : Go로 작성되었으며 다른 인기 번들러보다 10-100배 빠르다고 광고합니다.

그러나 문제가 있습니다. 번들러일 뿐입니다. 앱을 만들기 위해 한 줄로 제공되지 않으며 개발 서버를 시작하고 실행하기 위해 약간의 수정이 필요합니다.

폴더를 만들어 시작하겠습니다.

mkdir my-esbuild-app && cd my-esbuild-app


다음으로 esbuild & react 종속성을 설치합니다.

npm init -y && npm install esbuild --save-dev && npm i react react-dom --save
# added 7 packages, and audited 8 packages in 828ms
# found 0 vulnerabilities


예상대로 크기가 가장 작습니다.

du -hc -s  node_modules
# 14M   node_modules


준비하세요: 약속된 땜질 시간입니다 🧑‍🔬

공개 파일이 있는 폴더를 만듭니다.

mkdir public &&
echo '<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Esbuild + React</title>
    <link rel="stylesheet" href="/dist/main.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="/dist/main.js"></script>
  </body>
</html>' > public/index.html


그리고 일부 소스 파일:

mkdir src &&
echo ':root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}

#root {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}' > src/index.css &&

echo 'import React, { useState } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

const App = () => {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      <h1>Esbuild + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);' > src/main.jsx


마지막으로 개발 서버를 실행합니다.

./node_modules/.bin/esbuild src/main.jsx --servedir=public --outdir=public/dist  --bundle


그리고 작동합니다 😄
약간의 도전을 하고 싶다면 페이지에 일부 자산을 추가하는 것이 좋습니다. 이전 앱 중 하나의 SVG 로고. 이를 위해 로더를 설정해야 합니다 😉.

하지만 추가해야 할 사항이 있습니다. 현재로서는 핫 모듈 교체를 작동시키는 빠르고 쉬운 방법이 없습니다. 솔직히 말해서 변경 사항이 있을 때마다 페이지를 수동으로 새로 고쳐야 하지만 실시간 다시 로드가 설정하기가 조금 더 쉽습니다.

결론



Create-react-app은 느리고 무겁고 Vite는 훨씬 더 부드러운 개발자 경험을 제공하고 즉시 사용할 수 있습니다. 그러나 거대한 프로젝트를 구축하거나 가능한 가장 작은 설치 공간이 필요한 경우 esbuild를 살펴볼 가치가 있습니다.
NodeJS Express의 예외 처리
객체란 무엇입니까? - 1부

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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