대부분의 자바스크립트 프런트엔드 프로젝트에서 사용하는 3개의...

대부분의 자바스크립트 프런트엔드 프로젝트에서 사용하는 3개의...

저는 2019년형 맥북 프로를 사용하고 있는데, 그 기계가 개발자의 맹수임에도 불구하고, 저는 업무 시간 동안 물레를 쳐다보는 것에 지쳤습니다.

핫리로드가 느려지면 맥이 느려져 집안일을 자주 해야 한다. 결국, 저는 저의 구세주가 된 몇몇 도서관에서 놀았고, 지금은 프런트엔드 자바스크립트 프로젝트 대부분에서 이 라이브러리들을 사용하고 있습니다.

1. ViteJs

저는 지난 달에 레거시 리액트 프로젝트를 인수했는데, 중복된 코드가 많습니다.

이 프로젝트는 Parcel 1을 번들러로 사용하고 있었고 시작과 핫리로드에 오랜 시간이 걸렸다. 더 나쁜 것은 캐시가 500MB의 디스크 공간을 소모했다는 것입니다! 공간이 부족해질 때까지 그것을 알아차리지 못했어요. routes.tsx 에서 찾아야 할 각각의 파일을 찾아야 할 때마다 routes.tsx 에 500줄이 넘는 줄이 있습니다. 귀찮아! 나중에 제가 어떻게 500개 이상의 라인에서 50개 라인까지 경로를 자동으로 생성하는지 보여드리겠습니다!

제가 세상에서 가장 빠른 개발자인 것처럼 느껴지기 때문에 저는 대신 Vite를 사용하기로 결심했어요!

여기서 질문은 다음과 같습니다.

왜 ViteJS인가?

대규모 프로젝트를 위해 코딩하는 경우 개발 서버를 위해 최대 몇 분까지 소요될 수 있으며 HMR(Hot Module Reload)의 경우 브라우저에 반영되는 데 몇 초 정도 걸릴 수 있습니다! 이 두 가지 문제는 모두 개발자의 기분과 생산성에 영향을 미치고 있습니다.

일부 종속성이 너무 커서 처리할 수 없습니다. Vite에서 esbuild 를 사용하여 종속성을 미리 번들하고 있습니다. 에스빌드는 Go로 작성돼 있으며 네이티브 코드로 컴파일되기 때문에 JS 기반 번들러보다 100배 빠른 10배 속도를 낸다.

일반이 아닌 자바스크립트 파일을 편집할 때는 소스 코드를 모두 동시에 로드하지 않습니다. 이것이 ESM의 가장 좋은 부분 중 하나인 코드 분할입니다.

npm init vite vs npx create-create-app. 차이점이 보이십니까? 한번 해보면 바이트에 중독될 거야! Vite의 플러그인이 롤업의 플러그인 인터페이스를 확장하고 있으며 롤업의 구성으로 Vite를 구성할 수 있습니다.

경로 자동 생성

설명

Vite는 여러 모듈을 가져올 수 있는 import.meta.glob라는 기능이 내장되어 있으며 fast-glob을 사용하고 있다.

나는 모든 모듈을 .tsx라는 확장자로 끝나는 디렉토리에서 컴포넌트라는 디렉토리와 파일들을 무시하고 개인 컴포넌트라는 이름의 디렉토리에서 가져온다.

파일 이름이 _ 로 시작하고 tsx 로 끝나면 URL 파라미터에 대해 _ 가 : 로 대체된다.

여기서 지구본을 테스트해 볼 수 있습니다.

2. PNPM

내 맥북의 공간이 부족했기 때문에, 다양한 프로젝트에서 기존의 노드_모듈 을 삭제하는 것만으로는 충분하지 않았다! 저는 다른 해결책을 찾아야 해요. 결국, 나는 PNPM을 찾았다.

PNPM은 빠를 뿐만 아니라 공간 절약도 가능합니다! NPM이나 Yarn을 사용할 때 로다시와 모멘트를 활용한 10개 프로젝트가 있다면 로다시와 모멘트의 10배를 설치하게 된다.

PNPM은 종속성을 글로벌 저장소에 설치하고 파일은 프로젝트에서 하드 링크됩니다. 즉, 1MB의 foo를 사용하는 프로젝트가 10개라면 같은 버전의 foo는 10MB가 아니라 1MB에 디스크 공간만 소모한다는 뜻이다.

PNPM CLI는 NPM과 Yarn과 매우 유사합니다. 모노레포에 대한 지원도 내장되어 있습니다. 이제 레나와 헤어져야 할 시간인가. 직접 먹어본 적은 없어요. 지금은 아무 말도 할 수 없어요.

내가 발견한 유일한 단점은 PNPM이 알파인 도커 이미지에서는 작동하지 않는다는 것이다. 하지만 큰 문제는 아니다.

3. 윈디 CSS

WindiCSS와 Tailwind JIT는 다른 두 가지 물질입니다. Windi는 열정적인 개발자들에 의해 커뮤니티에 기반을 두고 있는 반면, A사는 순풍을 지원합니다. 마지막으로 확인한 바로는 JIT가 Windi보다 느렸지만 지금은 Windi보다 JIT가 훨씬 빠릅니다.

그러나 WindiCSS는 Tailwind에 몇 가지 추가 기능을 제공한다. 이 링크에서 기능을 확인하십시오.

WindiCSS 팀은 아직 JetBrain의 플러그인 작업을 시작하지 않았다. 따라서 자동 완성이 필요한 경우 tailwindcss의 종속성을 설치하고 공식 플러그인을 사용해야 합니다.

Vite 플러그인에서 가장 마음에 드는 기능 중 하나는 아래와 같은 attributify 모드입니다.

// https://windicss.org/posts/v30.html#attributify-mode의 조각 // windi.config.ts 내보내기 기본값 { 속성 지정: 참, } // 아래 마법 <단추 bg="blue-400이 맴돈다:blue-500 dark:blue-500 dark:blue-500 dark:blue-600" text="sm white" 글꼴="광선" p="y-2 x-4" 테두리="2개의 둥근 파란색-200" > 단추 // OR // windi.config.ts 내보내기 기본값 { 속성: { 접두사: 'w:', }, } // 아래 마법 <단추 w:bg="blue-400 호버:blue-500 dark:blue-500 dark:blue-500 dark:blue-600" w:text="sm white" w:colon="광선" w:p="y-2 x-4" w:border="2 라운드 블루-200" > 단추

읽어주셔서 감사합니다.

참고문헌

from http://sup-poster.tistory.com/5 by ccl(A) rewrite - 2021-09-18 16:26:06