Babel 로더
Last updated
Was this helpful?
Last updated
Was this helpful?
Button 컴포넌트를 작성하면서 사용된 코드는 ES6의 class 문법입니다. (사실 이 실습 파일의 모든 코드는 ES6입니다.) 안타깝게도
bundle
NPM 명령을 실행해 모듈을 번들링 합니다.
번들링에 성공하면 브라우저 개발 도구 Sources 탭에서 ES5 코드로 컴파일된 Button 컴포넌트 코드를 볼 수 있습니다.
먼저 Button 컴포넌트 class 내부에 속성 초기화 또는 정적 클래스 속성 구문을 작성해봅시다.
작성된 파일을 저장하고 번들링 하면 다음과 같은 오류가 발생합니다. 오류 내용은 실험적인 문법인 classProperties를 현재 사용할 수 없다는 문구입니다.
ERROR in ./src/components/Button/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /Users/yamoo9/Documents/PROJECT/js-senior-in-ogada/meetup(offline)/week01/02-setting-webpack/src/components/Button/index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (13:16):
오류를 해결하려면 @babel/plugin-proposal-class-properties를 사용할 수 있도록 설치하고 구성해야 합니다.
플러그인 사용을 위한 구성이 완료되면 오류 없이 번들링이 성공적으로 수행됩니다.
그러므로 class, ES Modules 등 ES6+ 문법을 사용한 앱 코드는 모두 IE에서 제대로 작동하지 않습니다. IE에서도 ES6 문법을 사용하려면 를 사용해야 합니다.
, , 패키지를 프로젝트에 설치한 후, Webpack 구성 파일의 모듈 규칙 안에 로더를 설정합니다.
플러그인은 속성 초기화(Initializer) 구문으로 선언 된 속성 뿐만 아니라, 정적(Static) 클래스 속성 또한 변환(Transform) 합니다.
실습에서 설치해 사용한 플러그인 말고도 다양한 플러그인을 Babel JavaScript 컴파일러는 지원합니다. 을 참고해 사용하고자 하는 플러그인을 설치해 활용해보세요.