초간단 팁: javascript parcel로 빌드할 때 class property, private mehtods 사용하는 방법

Parcel을 사용하게 되었는데 (지금까지 경험한 바로) 엄청 간단하고 편하다. 그저 parcel index.html이라는 간단한 명령어로, HTML, CSS, 거기에 링크된 자바스크립트 파일들 빠른 속도로 빌드하고 내장 개발용 서버까지 제공해준다.

Parcel은 CommonJS와 ES6 파일 임포트를 모두 지원한다고 한다. 하지만 이 상태로는 현재 실험적 기능(experimental feature)인 Class fields는 자동으로 빌드되지 못한다. 따라서 에러가 발생한다.

Javascript Class fields를 parcel을 통해 사용하고 싶다면, 역시 중간에 어떤 조치를 취해야 하는데 그것이 그 유명한 babel이다. 하지만 매우 간단하다. @babel/plugin-proposal-class-properties와 @babel/plugin-proposal-private-methods 플러그인을 설치하면 된다.

npm install --save-dev @babel/plugin-proposal-class-properties
npm install @babel/plugin-proposal-private-methods --save-dev

이 플러그인을 설치하고 .babelrc파일을 프로젝트 루트에 생성한 다음, 아래와 같이 작성해준다.

{
    "plugins":
    [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-private-methods"
    ]
}

그리고나서 다시 parcel index.html를 실행하면 알아서 @babel/core를 설치하고 빌드해준다. 그러면 끝! 클래스 프로퍼티를 원활히 쓸 수 있을 것이다😊

참고 및 출처

• https://ko.parceljs.org/
• https://ko.parceljs.org/javascript.html
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/Public_class_fields
• https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
• https://babeljs.io/docs/en/babel-plugin-proposal-private-methods