Babel & Webpack & NPM – React Vernacular Movement 07

머리말

이 글에서는 다음을 포함하여 React 프로젝트를 빌드하기 위해 알아야 할 세 가지 용어에 대해 설명합니다.

바벨이란 무엇입니까?
웹팩이란 무엇입니까?
npm이란 무엇입니까?

물론 주요 소개는 이러한 도구를 사용하는 개념이지만 Npm에서 Yarn까지 선택할 수 있는 다른 도구도 여전히 있습니다.

바벨이란 무엇입니까?

이전 기사에서는 JSX를 도구를 통해 컴파일해야 한다고 언급했고, 이 시리즈의 이전 기사에서도 JavaScript ES6의 구문에 대해 언급했습니다.

실제로 ES6도 컴파일이 필요한 경우가 있는데, 컴파일(Compile)을 위해 Babel Suite를 사용하기도 합니다.

먼저 JavaScript 언어 자체는 문자 그대로의 프로그래밍 언어이고 브라우저는 이를 컴파일하지 않고도 내부에서 프로그램 구문을 실행할 수 있다는 점을 설명하겠습니다.

그러나 모든 브라우저가 최신 구문을 모두 지원하는 것은 아니므로 Babel과 같은 도구를 사용합니다.

브라우저가 실행하기 전에 ES6 및 JSX 구문을 포함한 최신 구문을 이전 버전의 JavaScript 구문으로 변환하십시오.

프론트엔드 개발 관점에서 Babel은 필수적인 도구입니다. 주요 기능은 최신 버전의 JavaScript 구문, 특히 ECMAScript 6(ES6)의 구문을 브라우저가 이해하고 실행할 수 있는 이전 버전의 JavaScript로 변환하는 것입니다.

ES6에는 화살표 함수, 템플릿 문자열, 구조 분해 할당 등과 같은 많은 강력한 기능이 도입되었습니다. 그러나 브라우저 지원 수준이 다르기 때문에 브라우저 간 호환성을 보장하려면 컴파일에 Babel을 사용해야 합니다.

또한 JSX 구문을 사용하여 React 애플리케이션을 개발할 때 컴파일을 위해 Babel도 필요합니다. JSX는 React 구성 요소의 구조를 설명하는 데 사용되는 JavaScript 구문 확장입니다. JavaScript로 HTML과 같은 마크업을 작성할 수 있게 해주지만, 브라우저에서는 JSX 구문을 직접 실행할 수 없으므로 Babel을 통해 이를 순수 JavaScript로 변환해야 합니다.

웹팩이란 무엇입니까?

컴파일 도구 Babel을 설명한 후에 "Webpack"이라는 모듈식 패키징 도구도 설명해야 합니다.

대규모 프로젝트에는 JavaScript 외에도 CSS, LESS, SCSS, JSX... 등과 같은 다양한 유형의 파일이 있을 수 있습니다.

여러 폴더에 흩어져 있는 파일들을 처리하려면 통합 도구가 필요하기 때문에 모든 파일을 통합하려면 Webpack과 같은 모듈러 패키징 도구(Module Bundler)가 등장합니다.

모듈식 패키징 도구의 장점은 모든 파일을 모듈화할 수 있다는 것 외에도 성능을 효과적으로 향상시킬 수 있다는 것입니다.

Webpack은 모듈식 패키징 도구로, 주요 기능은 JavaScript, CSS, LESS, SCSS, JSX 등을 포함하여 하나 이상의 파일로 통합하는 것입니다. 최종 파일. 이러한 모듈식 패키징은 개발 효율성을 향상시키는 데 도움이 됩니다. 특히 대규모 프로젝트에서는 코드 재사용 및 테스트를 용이하게 하기 위해 기능을 모듈화하고 분할할 수 있습니다.

Webpack은 단순한 패키징 도구 그 이상입니다. 코드 분할(Code Splitting)과 같은 일련의 강력한 기능도 제공합니다. 이를 통해 코드를 여러 청크로 분할하고 페이지 로딩 속도를 향상시키는 데 필요할 때만 로드할 수 있습니다. 동시에 모듈화(Modulize)는 Webpack의 핵심 개념입니다. 큰 기능을 작은 파일과 기능으로 분할함으로써 프로그램 코드의 구조가 명확하고 유지 관리 및 테스트가 쉽습니다.

또한 Webpack은 여러 위치에 흩어져 있는 다양한 모듈과 파일을 하나의 파일로 패키징하여 성능을 최적화할 수 있어 브라우저 로딩 시간을 줄이고 애플리케이션 성능을 향상시킬 수 있습니다.

웹팩 기능 소개

코드 분할

프로그램 코드를 여러 블록으로 분할하고 필요할 때 특정 블록을 로드합니다.

모듈화하다

모듈화는 매우 중요한 개념입니다. 많은 대규모 기능을 작은 파일과 기능으로 분할하고 이러한 모듈식 작은 파일을 재사용 및 테스트에 사용합니다.

성능 최적화

다양한 모듈과 여러 곳에 흩어져 있는 일부 파일을 하나의 파일로 묶어서 읽어주기 때문에 특정 기능을 사용하여 읽으면 로딩 시간을 대폭 줄일 수 있습니다.

npm이란 무엇입니까?

위에 두 가지 도구가 소개되었는데, 이러한 도구나 코드는 어디서 다운로드할 수 있나요? 프런트엔드 개발자의 경우 Node.js가 설치되어 있으면 자동으로 npm을 사용할 수 있습니다.

npm은 세계 최대의 소프트웨어 레지스트리입니다. 모든 대륙의 오픈 소스 개발자는 npm을 사용하여 소프트웨어 모듈 패키지를 공유하고 대여하며, 많은 회사에서도 npm을 사용하여 프라이빗 개발을 관리합니다.

npm의 전체 이름은 Node Package Manager입니다. Node.js에서 npm cli 도구를 통해 패키지를 설치하고 관리할 수 있습니다.

예를 들어 React 패키지를 사용하려면 터미널에 명령만 입력하면 npm이 자동으로 레지스트리에서 React 프런트엔드 프레임워크를 찾아 node_modules 폴더에 다운로드합니다.

인용하다

React Vernacular Movement 08 - 바벨 웹팩 Npm

리액트 토속 스포츠 시리즈

React JSX – React 언어적 움직임 06

React 작동 방식 – React Vernacular Movement 05

JavaScript 고차 함수 – React Vernacular Movement 04

JavaScript Async Await – React Vernacular Movement 03

JavaScript ES6 객체 – React Vernacular Movement 02

JavaScript ES6 – React Vernacular Movement 01

다시 채우다

고마워요 샘 황 보충, 독자들은 샘의 특별한 영역에서 읽을 수 있습니다!

기사에서 Babel이 언급된 장에 몇 가지 추가 사항을 추가하고 싶습니다. Babel 자체가 컴파일러인데, 이는 사실이지만(공식 웹사이트에서는 주장합니다), 하위 호환 부분을 언급한다면 더 정확할 수도 있습니다. 트랜스파일러를 사용합니다. ES6에는 많은 구문 설탕이 있는데, 이는 바벨을 통해 ES5 구문으로 변환될 수 있으며 더 나은 호환성을 가질 수 있습니다.

그렇다면 직역과 컴파일 번역의 비교는 언어와 실행 환경의 관계로 현재 소위 순수 직역 언어(성능과 유연성을 모두 고려하기 위해 다음과 같은 기술)가 거의 없습니다. 일반적으로 JIT가 도입됨)

머리말