키 테이크 아웃
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>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
이로 인해 각 브라우저의 마지막 두 버전과 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>
로그인 후 복사
로그인 후 복사
웹 팩 구성은 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>로그인 후 복사
웹 팩을 설치하려면 디렉토리에서 다음을 실행하십시오 :
<span>npm init -y
</span>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
보시다시피,이 스크립트는 webpack.config.js 파일을 호출하고 있으므로 다음 내용이있는 디렉토리에서이를 작성하겠습니다.
이것은 웹 팩에 필요한 가장 간단한 구성 파일입니다. 앞에서 설명한 <span>npm install babel-cli babel-preset-env --save-dev
</span>
로그인 후 복사
로그인 후 복사
<span>"devDependencies": {
</span> <span>"babel-cli": "^6.26.0",
</span> <span>"babel-preset-env": "^1.6.1"
</span><span>}
</span>로그인 후 복사
로그인 후 복사
폴더에서 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을 사용하여 최신 JavaScript (웹 브라우저에서 실행)를 처리하기위한 빌드 설정을 작성하는 것을 살펴볼 것입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
