Frontend Skills - 모듈, browserify, polyfill과 babel

Frontend Skills:

모듈, browserify, polyfill과 babel

| 모듈

: model, module :라틴어 modulars에서 따왔으며, 어원이같다.

• js는 원래 전역객체만 있었다.
• ember, backbone.js 같은게 등장하면서 client 코드가 복잡해졌다. -> 모듈의 필요성

> 모듈의 전개과정

IIFE module pattern -> require.js (AMD) -> common.js / node -> import

참고하면 좋을글 : 

JavaScript 표준을 위한 움직임: CommonJS와 AMD

https://d2.naver.com/helloworld/12864

> 모듈의 등장

js파일을 쪼개야하는경우가 있었다. 그럴땐, 각각의 스크립트를 일일히 다넣어줬다. 

ex) 

<script href=toast.js ..>

<script href=main.js ..>

문제점: 

• 스크립트가 이순서대로 진행됨 -> 이러한 순서를 신경 써야함.
• dependency가 꼬일 수있음

이를 해결하기위해 모듈의 개념이 등장

> IIFE

IIFE를 사용한 전역오염을 피하는 코드 (아래)

IIFE 패턴을 사용하여 별도의 스코프를 만들어서, 전역오염을 피한다.

(function(window){
  var MESSAGE='message'
  window.toast=function(){
    console.log(MESSAGE);
  }
})(window)

> require.js

• AMD : 비동기를 다루는 기술
• 노드에서 쓰는 require랑 require.js는 다른것이다.

> common.js

• 노드에서 흔히쓰는 require는 common.js 형태임 (  require.js를 사용한다고 헷갈리면 안됨)

> 모듈 export관련 참고사항 

:아래코드에서 위의 2줄과 아래의 2줄은 같은기능을 하는코드

module.exports =function hello(){
  console.log('hello');
}
​
module.exports.hi =function(){
  console.log('hi');
}
////////// 같은것
function hello(){
  console.log('hello');
}
​
hello.hi= function(){
  console.log('hi');
}
​
module.exports = hello

| Browserify

• 번들 이라는 아이디어 제시 (빌드를 해서 넘겨주자)
• module이나 require이나 이런 함수들은 브라우저에는 없음, 따라서 browserify로 번들해서 넘겨줌, 그러면 module이나, require같은것 실행 가능
• 브라우저에서 commonjs 처럼 관리를 해줌
• browserify 덕분에 universal javscript 라는 개념이 나온것 (서버, 클라이언트에서 js 사용) , commonjs를 합쳐주는것
• polyfill을 해결하는것은 x, 단지 require 등을 써서 한파일로 만들어주는것!

| polyfill 과 babel

> polyfill을 써야하는 상황과 babel을 사용해야 하는 에러 상황 비교

•  ReferenceError() undefined ...: 자바스크립트가 알아듣긴한다. 하지만 없다. -> polyfill
•  syntax error... : 자바스크립트가 구문자체를 못알아들음 -> babel

ex 1)

import는 구문인것이고, require는 함수이다.  따라서,import를 미지원하는 브라우저에서 사용하기 위해서는 syntax error같은것이 발생할것이고, import는  babel로 컴파일을 해줘야 한다.

ex 2)

require, promise, set 같은 것을 미지원하는 브라우저에서 refernce Error() undefined 같은 에러가 뜰것이고, 이해시키려면 polyfill 을 해주는것으로 문제를 해결한다.

babel

> 바벨 버전 구분하는방법

• 6버전 babel-preset-env
• 7버전 @babel/preset-env

polyfill

• 모듈 하나
• babel은  파일을 바꾸는것이고, polyfill은 파일자체를 추가해준다.

| babelify

 

:transform의 일종이며,  browserify 하는중에 babel 도 적용할때 쓴다.

• babelify는 transform중 하나

| babel-polyfill 과 babel-preset-env

> babel-polyfill

• 폴리필의 묶음 (core.js에서 가져옴)
• babel 이 해주는 문법변환은 해주지 않음
• 모두 불러오면 리소스가 용량이 커서 부담이 됨

> babel-preset-env 

• 브라우저 종류를 넣으면, 환경에 맞게 변환을 해줌

결론: babel-preser-env 와 babel-polyfill을 함께쓰면, 필요한 것만 뽑아 쓸수 있다.