programing

Babel 6을 ES5 자바 스크립트로 컴파일하려면 어떻게해야합니까?

nasanasas 2020. 12. 31. 08:28
반응형

Babel 6을 ES5 자바 스크립트로 컴파일하려면 어떻게해야합니까?


최신 버전의 바벨을 설치했습니다. 현재 6.4.0. 다음 코드가있는 myclass.js라는 파일을 만듭니다.

class MyClass {
    constructor(name) {
        console.log("I am a MyClass object .. ", name);
    }
}

var myclass = new MyClass('1234');

수업을 만든 후 명령 줄에서 다음을 수행합니다.

$> babel ./src/myclass.js --out-file ./out/app.js

내 app.js 파일에 es5 컴파일 된 자바 스크립트가있을 것으로 예상하지만 myclass.js 파일과 동일한 코드가 있습니다. 이 문제를 일으키는 원인이 무엇입니까?


Babel에게 ES5를 대상으로 지정하지 않고 필요한 사전 설정 / 플러그인을 선택합니다. 예를 들어 es2015사전 설정 을 사용하면 ES6 코드가 ES5 호환 코드로 컴파일됩니다. "대상"을 지정하지 않았습니다.

아래 가이드는 Babel을 사용하여 ES6 코드를 ES <= 5를 지원하는 환경에서 실행할 수있는 코드로 변환하는 방법을 안내합니다.


0. Babel 5의 API 변경 사항에 대한 참고 사항

에서 바벨 6 문서 :

바벨 패키지는 더 이상 없습니다. 이전에는 전체 컴파일러와 모든 변환에 CLI 도구가 포함되어 있었지만 이로 인해 불필요하게 큰 다운로드가 발생하고 약간 혼란 스러웠습니다. 이제 우리는 이것을 babel-cli와 babel-core라는 두 개의 개별 패키지로 분할했습니다.

과:

Babel 6은 기본 변환없이 제공되므로 파일에서 Babel을 실행하면 아무것도 변경하지 않고 다시 인쇄합니다.

______

1. 설치 babel-cli

먼저 문서에서와 같이 다음을 설치해야합니다 babel-cli.

$ npm install babel-cli

______

2. 사전 설정 정의 .babelrc

둘째, 파일에 로컬 .babelrc( docs ) 을 사용하고 Babel에서 사용할 사전 설정명시 적으로 정의 해야합니다. 예를 들어 ES6 + 기능의 경우 env사전 설정 .

... 대상 환경에 필요한 구문 변환 (및 선택적으로 브라우저 폴리 필)을 세부적으로 관리 할 필요없이 최신 JavaScript를 사용할 수있는 스마트 사전 설정.

그것을 설치하십시오 :

npm install @babel/preset-env

그런 다음 다음에서 선언하십시오 .babelrc.

{
  "presets": ["@babel/preset-env"]
}

참고 : Babel 7.x를 사용하는 경우 " 광범위하게 적용되며 플러그인 및 사전 설정이 node_modules 또는 symlinked 패키지의 파일에 쉽게 적용되도록 허용 하는" "프로젝트 전체 구성"( babel.config.js) ( docs )을 선호 할 수 있습니다.

______

3. 실행 babel

이제 babel예제와 같이 명령을 실행하면 작동합니다.

$> babel ./src/myclass.js --out-file ./out/app.js

또한, 같은 들러를 사용 웹팩 , 롤업 , 또는 browserify 각각의 바벨 플러그인.

참조 URL : https://stackoverflow.com/questions/34747693/how-do-i-get-babel-6-to-compile-to-es5-javascript

반응형