Babel로 es6 파일을 컴파일한 사례에 대한 자세한 설명(코드 포함)

이번에는 Babel에서 es6 파일을 컴파일하는 경우(코드 포함)에 대해 자세히 설명하겠습니다. Babel에서 es6 파일을 컴파일할 때의 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

1.babel

babel 공식 웹사이트

위 명령을 통해 babel을 설치합니다. 여기서는 설치를 의미하고, -g는 전역적으로 설치를 의미합니다. 3.

을 사용하여 es6.js

npm i babel-cli -g

파일을 만든 다음 다음 명령을 사용하여 컴파일합니다.

let num = [1,2,3,4]; 
let plusDouble = num.map(item => item * 2); 
console.log(plusDouble);

그러면 컴파일된 파일이 현재 디렉터리에 나타납니다. 이렇게 하면 컴파일 프로세스가 완료됩니다. 그러나 컴파일된 파일을 실행하면 여전히 오류가 보고됩니다. 사실 주된 이유는 위의 컴파일이 제약 조건을 추가하지 않기 때문입니다. 즉, babel에 컴파일 방법을 알려주지 않습니다. 4. 구성

(1) 파일을 통해 구성

프로젝트 디렉토리에 .babelrc 파일을 생성하고 파일에 다음 코드를 작성합니다. 바벨은 플러그 형태로 사용됩니다. in에 다음 코드를 추가합니다. 객체 사전 설정 및 플러그인

babel es6.js -o compiled.js

플러그인을 설치합니다. 다음 플러그인을 사용하면 ES6 코드를 ES5 코드로 컴파일할 수 있습니다.

{ 
 "presets": [], 
 "plugins": [] 
}

(코드에--save-dev 로컬 개발 종속성의 설치를 나타냅니다)그런 다음 .babelrc의 파일을 다음 내용으로 수정합니다.

npm i --save-dev babel-preset-es2015

이 시점에서 컴파일 명령을 실행하여 다음 결과를 얻습니다.

{ 
 "presets": ["es2015"], 
 "plugins": [] 
}

결과는 다음과 같습니다.

이제 간단한 컴파일을 수행할 수 있지만, es7의 일부 새로운 기능에는 여전히 몇 가지 제한 사항이 있습니다. 이런 식으로 우리는 아래와 같이 컴파일을 위해 플러그인을 사용합니다.

object

-rest-spread에서도 마찬가지로 명령을 사용하여

"use strict";  
var num = [1, 2, 3, 4]; 
var plusDouble = num.map(function (item) { 
 return item * 2; 
}); 
console.log(plusDouble);

를 설치합니다. 마찬가지로 플러그인으로 이동하여

npm i babel-plugin-transform-object-rest-spread --save-dev

를 수정한 후 코드를 통해 테스트합니다(.. . 는 ES7에서 미리 구상된 아이디어입니다.):

{ 
 "presets": ["es2015"], 
 "plugins": ["transform-object-rest-spread"] 
}

컴파일 후 결과는 다음과 같습니다.

let courses = { name: 'english', score: 90}; 
courses = { ...courses, comment: 'A'}; 
console.log(courses);

_extends 메소드를 추가하여 객체 확장기를 변환하면 실행 중인 코드가 정상적으로 결과를 출력할 수 있습니다(2) 구성을 로드하여 webpack

구성 파일에 있는 다른

속성

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿으며, 더 흥미로운 내용이 있을 것입니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목하세요!

추천 자료:

js를 사용하여 페이지 태그 수를 계산하는 방법

WeChat 미니 프로그램에서 인증 코드 비밀번호 입력 상자 기능을 개발하는 방법

위 내용은 Babel로 es6 파일을 컴파일한 사례에 대한 자세한 설명(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!