juneyr.dev

vue를 어설프게 써보려고, vue-cli 모듈로 프로젝트를 만들면 이런 설명부터 나온다. '그냥 디폴트 스펙(webpack & babel) 깔아줄까? 아니면 다른 모듈쓸래? ^_^' 물론 webpack이랑 babel을 모르면 무슨 얘기인지 모르고 'ㅇㅇ.. 깔아줘...' 할 수밖에 없지만, 그러기에는 너무 바보같으니까 정리해보기로 한다.

뭐 자바스크립트는 모듈 import 개념이 없었다고

자바스크립트는 모듈을 지원하지 않는다. 아니 않았다. (ES5) 아니 그러면 한 파일에 모든 코드를 때려넣어야하니..? 하고 생각하면 그것도 아니라고 한다. 커뮤니티에서 이 현실을 개탄하면서 어떻게든 코드를 모듈화 하고 서로 임포트하는 개념을 만들어 냈다. 그렇게 등장한 두가지 스탠다드가 바로 CommonJS 모듈 (node.js 가 쓰는) 과 Asynchronous Module Definition(RequireJS 사용하는) 이다.

아니, 그렇지만 아무리 그래도 모듈 개념이 없는 건 너무 하잖아.. 하면서 자바스크립트에 새로운 표준이 생겼다. 바로 ECMAScript6 (ES6)다. ES6는 위의 두 스탠다드의 특장점들을 가져와서 새로운 포맷을 만들어냈다.

• CommonJS 처럼 간결한 문법을 갖추어, 싱글 익스포트 와 순환 의존성 지원함.
• AMD 처럼 바로 비동기 로딩과 (설정가능한) 모듈 로딩을 지원함.

거기에 '언어가 모듈을 지원하며' 생기는 장점도 추가 되었다.

• CommonJS보다 문법이 더 간결함.
• 구조가 static하게 분석 가능하고, 최적화도 됨.
• CommonJS보다 순환 의존성 지원이 잘됨

그런데 브라우저는 여전히 파일 단위 모듈을 잘 모른다

ES6는 일부 브라우저에서만 지원한다.(크롬, 사파리) 여러 버전의 각기 다른 브라우저는 이런 모듈화를 지원하지 않는 경우도 있다. 하나의 소스로 모든 브라우저에서 보여주는 게 웹의 특장점이다. 그래서 모듈을 하나의 파일로 묶어 네트워크 비용을 최소화 할 수 있어야한다. 이 과정을 번들링 bundling 이라고 한다.

웹팩 webpack 은 모듈 번들러이다. 웹팩의 다음 네가지 개념을 알아보자.

• 엔트리
• 아웃풋
• 로더
• 플러그인

엔트리

엔트리는 의존성 그래프의 시작점을 의미한다. 엔트리 파일을 의존하는 파일은 없고, 엔트리가 A를 의존하고, A가 다시 B, C를 의존하고.. 하는 식으로 모듈이 연결된다. 이때 웹팩은 이미지, 폰트, 스타일시트 역시 모듈로 관리한다. 설정파일에서 엔트리 파일을 지정할 수 있다.

이렇게 넣으면 시작점이 src/main.js 가 된다. entry 키에 시작점 경로를 지정한다.

아웃풋

엔트리에 설정한 자바스크립트 파일을 시작으로, 의존되어 있는 모듈을 하나로 묶어서 내보낸다 (번들링). 번들된 결과물이 나오는 위치는 output 키에 기록한다.

dist 폴더에 bundle.js 파일에 결과가 나오게 된다.

html 파일에는 번들링된 이 파일만 나오게 되면 된다.

웹팩을 터미널에서 webpack 커맨드를 입력하여 바로 빌드할 수 있다. vue-cli 를 사용하는 상황이었으니 기본으로 webpack은 설치되어있다. webpack이 없는 경우 node.js 설치 후 npm install -g webpack 으로 전역 설치를 해준다.

로더

웹팩은 자바스크립트 파일 뿐 아니라 이미지, 폰트, 스타일시트까지 전부 모듈로 관리한다. 그런데 어떻게 하는 걸까? 웹팩은 자바스크립트밖에 모른다. 자바스크립트가 아닌 파일들은 웹팩이 이해하도록 변경해야한다. 이 역할을 바로 로더가 해준다.

css-loader

css를 자바스크립트 파일로 변환해서 로딩할 때 사용하는 로더이다.

다음과 같이 설정해주자. test에 로딩할 파일을 지정해주고, user에 사용할 로더를 정해주면 된다.

플러그인

로더는 (번들되기 전) 파일단위를 처리하는 반면, 플러그인은 번들된 결과물을 추가로 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용할 수 있다.

UglifyJsPlugin

자바스크립트 결과물을 난독화 처리하는 플러그인이다.

플러그인을 사용할 때는 웹팩 객체의 plugins 배열에 추가한다.

바벨은 뭐야

그놈의 브라우저가 계속 문제다. 어쨌든 저렇게 했음에도 불구하고, ES6나 ES7(최신표준) 브라우저가 이해하지 못하기때문에 ES5로 바꿔주는 과정이 필요하다. 이 과정을 해주는 자바스크립트 컴파일러가 바벨이다. 개발자는 ES6 + 버전으로 개발할 수 있으니 생산성은 향상된다.

다만 babel을 사용한다고 해서 모든 최신 자바스크립트 함수를 다 사용할 수 있는 것은 아니고, 브라우저에서 지원하지 않는 함수를 검사하는 작업이 프로그램 시작에 진행되어야한다. 이 역할은 babel-polyfill이 담당한다.

+) 2022.05.31 추가 : 사내에 너무 유용한 글이 적혀있는 링크가 공유되었다! 바벨에 대한 직관적인 설명이 있으니 여기를 꼭 참고하면 좋겠다. 😎 https://ko.javascript.info/polyfills

바벨은 다음과 같이 문법을 바꿔준다.

설치는 이렇게

1. 커맨드 라인에 다음 명령어를 실행한다. 물론 npm은 깔려있어야한다.

2. 프로젝트 루트에 babel.config.js 라는 파일을 만든다. 그리고 다음과 같이 작성

3. src 디렉토리에 있는 모든 파일을 컴파일(babel 문법변환) 해서 lib 으로 옮겨준다.

다음 명령어를 치면 된다.

참고

http://blog.jeonghwan.net/js/2017/05/15/webpack.html

https://moon9342.github.io/javascript-babel

https://babeljs.io/docs/en/