babel in vue은 무슨 뜻인가요?

vue에서 Babel은 주로 ECMAScript 2015+ 구문으로 작성된 코드를 이전 버전과 호환되는 JavaScript 구문으로 변환하여 현재 및 이전 버전의 브라우저 또는 기타 환경에서 실행할 수 있는 JavaScript 컴파일러입니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

ES6 구문은 vue 프로젝트에서 일반적으로 사용되지만 때로는 프로젝트가 하위 버전 브라우저와 호환되어야 할 경우 es6를 es5로 변환하기 위해 babel 플러그인을 도입해야 합니다. 바벨이 무엇인지 살펴보겠습니다.

Babel은 JavaScript 컴파일러입니다.

Babel은 ECMAScript 2015+ 구문으로 작성된 코드를 이전 버전과 호환되는 JavaScript 구문으로 변환하여 현재 및 이전 버전의 브라우저 또는 기타 환경에서 실행할 수 있도록 주로 사용되는 도구 체인입니다. 다음은 Babel이 수행할 수 있는 작업입니다.

• 문법 변환

• Polyfill을 통해 대상 환경에 누락된 기능 추가(core-js와 같은 타사 폴리필 모듈 도입)

• 소스 코드 변환(codemods)

// Babel 输入： ES2015 箭头函数
[1, 2, 3].map(n => n + 1);

// Babel 输出： ES5 语法实现的同等功能
[1, 2, 3].map(function(n) {
  return n + 1;
});

babel을 vue

1에 설치하는 단계 babel-polyfill 플러그인

npm install --save-dev babel-polyfill

2을 설치합니다.

첫 번째: 항목 파일에 도입되었습니다. 예: main.js에

import 'babel-polyfill'

추가 두 번째: webpack.config.js 파일의 항목 입구에서 다음과 같이 수정합니다

세 번째: CDN 리소스를 사용하면 HTML 페이지에 js 파일로 추가됩니다. 예:

설명:

babel 플러그인이 es6 구문을 es5로 변환하는 데 도움이 될 수 있지만 그렇게 할 수는 없습니다. Iterator, Generator, Set, Map, Proxy, Reflect, Symbol, Promise 및 기타 전역 객체와 같은 새 API를 변환하려면 babel-polyfill을 사용하여 shim을 제공해야 합니다. 현재 환경을 위해.

설치 명령어는 다음과 같습니다.

　　

그런 다음 스크립트 헤드에 다음 코드 줄을 추가합니다.

　　

【관련 추천: "vue.js tutorial"】

위 내용은 babel in vue은 무슨 뜻인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!