es6를 es5로 변환하는 이유

이유: 브라우저 호환성과 node.js 환경에서 애플리케이션을 원활하게 실행하기 위해. JS의 새로운 사양으로 ES6에는 새로운 구문과 API가 많이 추가되었지만 최신 브라우저는 ES6의 새로운 기능을 잘 지원하지 않으므로 ES6 코드를 ES5 코드로 변환하고 설치하기만 하면 됩니다. 프로젝트에서 Babel 도구를 구성합니다. 그게 다입니다.

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

es6을 es5로 변환하는 이유는 무엇입니까?

간단한 대답은 브라우저 호환성과 node.js 환경에서 애플리케이션을 원활하게 실행하기 위함입니다.

ES6은 JS의 새로운 사양으로 새로운 구문과 API가 많이 추가되지만 시중에 나와 있는 모든 브라우저가 호환되는 것은 아니므로 ES6 구문 코드를 ES5 코드로 변환해야 합니다.

최신 브라우저는 ES6의 새로운 기능을 잘 지원하지 않기 때문에 ES6의 새로운 기능을 브라우저에서 직접 사용하려면 다른 도구를 사용해야 합니다.

node.js 환경에서는 버전 13 이후에 모듈 모드가 도입되었지만(package.json에 "type": "module" 문장 추가) 일부 라이브러리는 여전히 ES6 구문을 지원합니다. 지원되지 않습니다. 따라서 node.js 프로그램이 ES6 구문을 인식하지 못하는 경우 Babel을 사용하여 트랜스코딩하면 문제가 해결될 수 있습니다.

es6을 es5로 변환하는 방법?

Babel을 사용하여 es6을 es5로 변환하세요.

아래에서는 전체 번역 과정을 이해할 수 있도록 명령줄에서 Babel을 사용하는 과정을 작성합니다.

1. 프로젝트에 Babel의 명령줄 도구를 설치합니다

npm install -D babel-cli

2. ES6 코드 준비

보통은 이미 만들어진 ES6 코드가 없으면 소스 코드를 src 디렉토리에 넣습니다. src에 넣으세요.

// src/example.js
class Hello {
  static world() {
    console.log('Hello, World!');
  }
}
Hello.world();

3. Babel 구성

Babel은 플러그인과 사전 설정을 통해 코드를 트랜스파일합니다(ES6뿐만 아니라 번역도 가능합니다). ES6를 ES5로 변환하려면 env 기본값만 구성하면 됩니다. 이 플러그인을 설치하세요:

npm install -D babel-preset-env

또한 프로젝트 루트 디렉터리에 다음 내용이 포함된 .babelrc 파일을 생성해야 합니다.

// .babelrc
{
  "presets": ["env"]
}

4. npm 명령 생성

이 단계는 필요하지 않습니다. 이전에 구성되었으므로 다음 명령을 직접 실행할 수 있습니다.

babel src -d build

이렇게 하면 src 디렉터리의 Javascript 코드가 ES5로 변환되어 저장됩니다. 빌드 디렉터리 Down에 있습니다.

기존에는 npm 명령어에 door-to-door 명령어를 넣어두었습니다. 프로젝트의 package.json에 다음 콘텐츠를 입력합니다.

"scripts": {
  "build": "babel src -d build",
},

이렇게 하면 다음 명령을 사용하여 ES6 코드를 번역할 수 있습니다.

npm run build

[관련 권장 사항: javascript video tutorial, web front-end]

위 내용은 es6를 es5로 변환하는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!