Babel 및 Webpack을 사용하여 ES6 프로젝트 설정

이 기사에서는 Babel 및 Webpack을 사용하여 최신 JavaScript (웹 브라우저에서 실행)를 처리하기위한 빌드 설정을 작성하는 것을 살펴볼 것입니다. 이것은 우리의 최신 JavaScript 코드가 그렇지 않으면 더 넓은 범위의 브라우저와 호환되도록해야합니다. 대부분의 웹 관련 기술과 마찬가지로 JavaScript는 항상 진화하고 있습니다. 좋은 옛날에는 태그 몇 개를 페이지에 삭제하고 jQuery와 몇 개의 플러그인을 포함하여 갈 수 있습니다. 그러나 ES6의 도입 이후 상황이 점차 복잡해졌습니다. 새로운 언어 기능에 대한 브라우저 지원은 종종 고르지 않으며 JavaScript 앱이 더 야심적이되면 개발자는 모듈을 사용하여 코드를 구성하기 시작했습니다. 결과적으로 오늘날 현대 JavaScript를 작성하는 경우 프로세스에 빌드 단계를 도입해야합니다.

. 아래 링크에서 볼 수 있듯이 ES6에서 ES5로 변환하면 지원할 수있는 브라우저 수가 크게 증가합니다.

ES6 호환성

ES5 호환성

빌드 시스템의 목적은 브라우저 및 프로덕션을 위해 코드를 준비하는 데 필요한 워크 플로를 자동화하는 것입니다. 여기에는 코드를 다른 표준으로 전환하고 CSS에 SASS를 컴파일, 파일 번들링, 코드 미수 및 압축 및 기타 여러 단계가 포함될 수 있습니다. 이를 일관되게 반복 할 수 있도록 단일 명령에서 알려진 순서로 단계를 시작하려면 빌드 시스템이 필요합니다. 키 테이크 아웃

Babel 및 Webpack을 활용하여 최신 JavaScript 프로젝트를 설정하여 ES6 코드가 광범위한 웹 브라우저에서 호환되도록합니다. 는 package.json 파일로 프로젝트 구조를 만들고 SRC 및 소스 및 변환 된 JavaScript에 대한 공정 디렉토리로 코드를 구성하는 것으로 시작합니다. Babel을 ES6으로 트랜스 파일로 설치하고 특정 브라우저 버전을 타겟팅하고 NPM 스크립트를 사용 하여이 프로세스를 자동화합니다. IE11과 같은 이전 브라우저와의 호환성은 제한적이지만

는 제한적으로 제한되지만 JavaScript 코드를 효과적으로 관리하고 모듈화하기 위해 ES6 모듈을 구현합니다.

webpack을 JavaScript 모듈을 단일 또는 여러 파일로 번들로 묶어 서버 요청을 줄이고로드 시간을 최적화합니다. 코드 변경시 브라우저를 자동으로 재 구축하고 새로 고치는 WebPack의 시청 및 Dev-Server 기능으로 개발 워크 플로우를 향상시킵니다.

전제 조건 를 따라 가려면 Node.js와 NPM이 모두 설치되어 있어야합니다 (함께 포장되어 있음). NVM과 같은 버전 관리자를 사용하여 노드 설치를 관리하는 것이 좋습니다.

설정 컴퓨터 어딘가에 루트 폴더를 만들고 터미널/명령 줄에서 탐색하십시오. 이것은 폴더가 될 것입니다 <.> 로 package.json 파일을 만듭니다

참고 : -y 플래그는 기본 설정으로 파일을 생성하며 명령 줄에서 일반적인 세부 정보를 완료 할 필요가 없음을 의미합니다. 원하는 경우 나중에 코드 편집기에서 변경할 수 있습니다. 폴더 내에서 Directories SRC, SRC/JS 및 공개를 만드십시오. SRC/JS 폴더는 처리되지 않은 소스 코드를 배치 할 위치가되며 공개 폴더는 전송 된 코드가 끝나는 곳입니다. 바벨로 변환 스스로 가기 위해, 우리는 Babel-Cli를 설치할 것입니다. Babel-Cli는 ES6을 ES5로 전송할 수있는 기능을 제공하고 Babel-Preset-Env를 제공합니다.이를 통해 전송 된 코드로 특정 브라우저 버전을 대상으로 할 수 있습니다. >

이제 당신은 당신의 package.json에 다음을 볼 수 있어야합니다

우리가 package.json 파일에있는 동안, 스크립트 섹션을 다음과 같이 읽도록 변경합시다 :

.

<span>npm init -y
</span>

이것은 매번 터미널에서 직접 대신 스크립트를 통해 바벨을 호출 할 수 있습니다. NPM 스크립트에 대한 자세한 내용과 그들이 할 수있는 일에 대해 자세히 알아 보려면이 itepoint 튜토리얼을 확인하십시오. 마지막으로, 바벨이 그 일을하고 있는지 테스트하기 전에 .Babelrc 구성 파일을 만들어야합니다. 이것이 바벨-프리 세트 엔브 패키지가 트랜스 파일 매개 변수에 대해 언급 할 것입니다. .babelrc라는 디렉토리에서 새 파일을 만들고 다음을 붙여 넣으십시오.

이로 인해 각 브라우저의 마지막 두 버전과 V7 이상의 Safari가 트랜스 파일로 Babel이 설정됩니다. 지원 해야하는 브라우저에 따라 다른 옵션을 사용할 수 있습니다. 저장된 상태에서 ES6을 사용하는 샘플 JavaScript 파일로 항목을 테스트 할 수 있습니다. 이 기사의 목적을 위해, 나는 템플릿 리터럴, 화살표 함수, const 및 let. 이것을 src/js/leftpad.js로 저장하고 터미널에서 다음을 실행하십시오.

모든 것이 의도 한대로 공개 폴더에서 JS/LeftPad.js라는 새 파일을 찾아야합니다. 이를 열면 더 이상 ES6 구문이 포함되어 있지 않으며 다음과 같이 보입니다.

ES6 모듈로 코드 구성

ES6 모듈은 다른 JavaScript 파일에서 사용할 수 있도록 함수, 객체 또는 기본 값을 포함하는 JavaScript 파일입니다. 당신은 하나에서 수출하고 다른 하나로 가져 오기. 진지한 현대 자바 스크립트 프로젝트는 모듈 사용을 고려해야합니다. 그들은 당신이 당신의 코드를 독립적 인 단위로 나누고, 따라서 일을 더 쉽게 유지할 수있게합니다. 그들은 네임 스페이스 오염을 피하는 데 도움이됩니다. 그리고 그들은 당신의 코드가 더 휴대 가능하고 재사용 할 수 있도록 도와줍니다.

대부분의 ES6 구문은 현대식 브라우저에서 널리 사용할 수 있지만 아직 모듈의 경우는 아닙니다. 글을 쓰는 시점에서는 Chrome, Safari (최신 iOS 버전 포함) 및 Edge에서 사용할 수 있습니다. 그들은 Firefox와 Opera의 깃발 뒤에 숨겨져 있습니다. 그리고 IE11이나 대부분의 모바일 장치에서 사용할 수 없으며 절대 가능하지 않을 것입니다. 다음 섹션에서는 모듈을 빌드 설정에 어떻게 통합하는지 살펴 보겠습니다.

내보내기 내보내기 키워드는 다른 파일에서 ES6 모듈을 사용할 수 있도록 허용하며,이를 수행하기위한 두 가지 옵션 (명명 및 기본값)을 제공합니다. 명명 된 내보내기를 사용하면 모듈 당 여러 개의 내보내기가있을 수 있으며 기본 내보내기를 사용하면 모듈 당 하나만 있습니다. 명명 된 수출은 여러 값을 내보내는 데 특히 유용합니다. 예를 들어, 앱 내 다양한 ​​장소에서 제공 해야하는 여러 유틸리티 기능이 포함 된 모듈이있을 수 있습니다. 따라서 왼쪽 패드 파일을 모듈로 바꾸겠습니다. 그런 다음 두 번째 파일로 요구할 수 있습니다. 지명 지명 된 내보내기를 만들려면 LeftPad 파일의 하단에 다음을 추가하십시오.

우리는 또한 "Strict 사용"을 제거 할 수 있습니다. 모듈이 기본적으로 엄격한 모드로 실행될 때 파일 상단에서 선언. Defult Export

LeftPad 파일에서 내보낼 단일 기능 만 있기 때문에 실제로 내보내기 기본값을 대신 사용하는 좋은 후보자 일 수 있습니다.

다시 "Strict 사용"을 제거 할 수 있습니다. 파일 상단에서 선언

import 내보내기 모듈을 사용하려면 이제 파일 (모듈)으로 가져와야합니다. 내보내기 기본 옵션의 경우 내보내기 모듈을 선택하려는 이름으로 가져올 수 있습니다. 예를 들어 LeftPad 모듈은 다음과 같이 가져올 수 있습니다.

또는 다른 이름으로 가져올 수 있습니다.

기능적으로, 둘 다 정확히 동일하게 작동하지만, 내보내는 것과 동일한 이름 또는 가져 오기를 이해할 수있게하는 것 - 아마도 내보낸 이름이 이미 다른 변수 이름과 충돌하는 곳은 분명히 의미가 있습니다. 수신 모듈에 존재합니다.

지명 된 내보내기 옵션의 경우 내보내기와 동일한 이름을 사용하여 모듈을 가져와야합니다. 이 예제 모듈의 경우 내보내기 기본 구문과 함께 사용한 것과 비슷한 방식으로 가져 왔지만이 경우 수입 이름을 곱슬 브레이스로 랩핑해야합니다.

.

버팀대는 지명 된 수출로 필수이며, 사용되지 않으면 실패합니다. 필요한 경우 import에서 지명 된 내보내기 이름을 변경할 수 있으며, 그렇게하려면 [Path] 구문으로 가져 오기 [모듈]을 사용하여 구문을 약간 수정해야합니다. 수출과 마찬가지로이 작업을 수행하는 다양한 방법이 있습니다.이 모든 방법은 MDN 가져 오기 페이지에 자세히 설명되어 있습니다.

<span>npm init -y
</span>

다시 말하지만, 이름 변경은 약간 무의미하지만, 무엇이든 변경할 수 있다는 점을 보여줍니다. 과일 기반 레시피를 준비하기 위해 루틴을 작성하지 않는 한 항상 좋은 이름 지정 관행을 유지해야합니다.

. 내보내기 모듈 소비 내보낸 왼쪽 패드 모듈을 사용하기 위해 SRC/JS 폴더에서 다음 index.js 파일을 만들었습니다. 여기서 나는 일련 번호 배열을 통해 반복되어 0으로 접두사를두고 8 자 문자열로 만듭니다. 나중에, 우리는 이것을 사용하여 HTML 페이지의 순서 목록 요소에 게시합니다. 이 예제는 기본 내보내기 구문 : 를 사용합니다

앞에서했던 것처럼 디렉토리에서 빌드 스크립트를 실행하십시오.

Babel은 이제 public/js 디렉토리에 index.js 파일을 만듭니다. LeftPad.js 파일과 마찬가지로 Babel이 모든 ES6 구문을 교체하고 ES5 구문 만 남겨 두었 음을 알 수 있습니다. 또한 ES6 모듈 구문을 노드 기반 모듈로 변환했음을 알 수 있습니다.

터미널은 이제 8자를 모두 길게 만들기 위해 0 개로 접두사로 접두사 배열을 로그 아웃해야합니다. 그로 인해 웹 팩을 볼 차례입니다.

웹 팩 소개 및 Babel 와 통합 언급 한 바와 같이, ES6 모듈은 JavaScript 개발자가 코드를 관리 가능한 청크로 나눌 수 있지만 그 결과는 해당 청크가 요청 브라우저까지 제공되어야하며 잠재적으로 수십 개의 추가 HTTP 요청을 추가해야합니다. 서버 - 우리가 실제로 피하고 싶은 것. 이것은 웹 팩이 들어오는 곳입니다.

<span>npm install babel-cli babel-preset-env --save-dev
</span>

Webpack은 모듈 번더입니다. 주요 목적은 모든 종속성을 추적하여 응용 프로그램을 처리 한 다음 브라우저에서 실행할 수있는 하나 이상의 묶음으로 패키지하는 것입니다. 그러나 구성 방식에 따라 그보다 훨씬 더 많을 수 있습니다.

웹 팩 구성은 4 가지 주요 구성 요소를 기반으로합니다

진입 점 출력 위치

<span>"devDependencies": {
</span>  <span>"babel-cli": "^6.26.0",
</span>  <span>"babel-preset-env": "^1.6.1"
</span><span>}
</span>

로더

플러그인

Entry : 이것은 웹 팩이 종속성을 식별 할 수있는 곳에서 응용 프로그램의 시작점을 보유합니다. 출력 : 이것은 처리 된 번들을 저장하려는 위치를 지정합니다. 로더 : 이들은 한 가지를 입력으로 변환하고 출력으로 다른 것을 생성하는 방법입니다. JavaScript 파일 이상을 처리하기 위해 WebPack의 기능을 확장하여 유효한 모듈로 변환하는 데 사용될 수 있습니다.

<span>"scripts": {
</span>  <span>"build": "babel src -d public"
</span><span>},
</span>

. > 플러그인 : 이들은 webpack의 기능을 미니 화, 라인 및 최적화와 같은 번들을 넘어서 다른 작업으로 확장하는 데 사용됩니다.

웹 팩을 설치하려면 디렉토리에서 다음을 실행하십시오 :

<span>npm init -y
</span>

이것은 프로젝트에 로컬로 웹 팩을 설치하고 Webpack-Cli를 추가하여 명령 줄에서 웹 팩을 실행할 수 있습니다. 이제 package.json 파일에 나열된 웹 팩이 표시됩니다. 해당 파일에있는 동안 다음과 같이 스크립트 섹션을 수정하여 바벨 대신 직접 웹 팩을 사용하는 것을 알고 있습니다.

보시다시피,이 스크립트는 webpack.config.js 파일을 호출하고 있으므로 다음 내용이있는 디렉토리에서이를 작성하겠습니다.

이것은 웹 팩에 필요한 가장 간단한 구성 파일입니다. 앞에서 설명한

<span>npm install babel-cli babel-preset-env --save-dev
</span>

entert 및 output 섹션을 사용한다는 것을 알 수 있습니다 (단독으로 기능 할 수 있지만 '개발'설정 모드도 포함되어 있습니다. Webpack에는 "개발"또는 "생산"모드를 사용할 수있는 옵션이 있습니다. 설정 모드 : '개발'은 빌드 속도 및 디버깅에 최적화되는 반면 모드는 런타임 및 출력 파일 크기에서 실행 속도를 최적화합니다. Tobias Koppers의 기사“Webpack 4 : Mode and Optimization”에는 기본 설정을 넘어서 구성 할 수있는 방법에 대해 자세히 알아 보려면 모드에 대한 좋은 설명이 있습니다. . 다음, 공개/JS 폴더에서 파일을 제거하십시오. 그런 다음 이것을 다시 실행하십시오 :

<span>"devDependencies": {
</span>  <span>"babel-cli": "^6.26.0",
</span>  <span>"babel-preset-env": "^1.6.1"
</span><span>}
</span>

이제 단일 ./public/bundle.js 파일이 포함되어 있음을 알 수 있습니다. 그러나 새 파일을 열면 우리가 시작한 두 파일은 다소 다르게 보입니다. 이것은 index.js 코드를 포함하는 파일의 섹션입니다. 원본에서 상당히 수정되었지만 여전히 변수 이름을 선택할 수 있습니다.

폴더에서 Node public/js/bundle.js를 실행하면 이전과 같은 결과와 동일한 결과를 얻을 수 있습니다. 변환 앞에서 언급했듯이 로더 를 사용하면 한 가지를 다른 것으로 변환 할 수 있습니다. 이 경우 ES6을 ES5로 변환하려고합니다. 이를 위해서는 몇 가지 패키지가 필요합니다 : 를 사용하려면 webpack.config.js는 output 섹션 이후에 추가 된 모듈 섹션이 필요합니다. 이것은 regex 문을 사용하여 Babel-Loader로 변환 할 JavaScript 파일을 식별하는 반면, Node_Modules 폴더의 내용을 제외합니다. 마지막으로, Babel-Loader는 .Babelrc 파일에 설정된 트랜스 파일 매개 변수를 설정하기 위해 이전에 설치된 Babel-Preset-ENV 패키지를 사용하라는 지시를받습니다. 이 완료되면 다음과 같은 재확인을 할 수 있습니다

그런 다음 새로운 public/js/bundle.js를 확인하면 ES6 구문의 모든 흔적이 사라졌지만 이전과 동일한 출력을 생성합니다. 브라우저로 가져 오는 기능이있는 웹 팩 및 바벨 설정을 구축 한 후 이제 우리가 한 작업을 브라우저에 가져올 차례입니다. 작은 html 파일이 필요하며 다음과 같이 폴더에서 작성해야합니다.

<span>npm init -y
</span>

그 안에 복잡한 것은 없습니다. 주목할만한 요점은 숫자 배열이 진행되는

요소와

위 내용은 Babel 및 Webpack을 사용하여 ES6 프로젝트 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!