webpack-1

javascript  scope 문제

//fun.js
function switchFun(a){
	return -a;
}

//main.js
switchFun(1) //-1

해당 코드는 하나의 html 안에서 로딩 해야만 실행이 된다. fun.js가 로딩이 되면, main.js가 수행된다.

문제는 switchFun이 전역공간에 노출 된다.

이에 따라 switchFun를 재정의 할경우 문제가 발생한다.

 

그래서 스코프 함수 사용

var fun = fun || {} // fun 네임스페이스

(function () {
  function switchFun(a) {
    return -a
  }
  fun.switchFun = switchFun // 네이스페이스에 추가
})()

이렇게 코드를 작성하면 나중에 switchFun을 재정의 하더라도 문제가 없다.

 

CommonJS

exports 키워드로 모듈을 만들고 require() 함수로 불러 들이는 방식

대표적으로 node.js에서 이를 사용함.

 

//fun.js
exports function switchFun(a){
	return -a;
}

//main.js
const fun = require=('./fun.js')
fun.switchFun(1) //-1

 

ES2015

//fun.js
exports function switchFun(a){
	return -a;
}

//main.js
import * as from './fun.js'
fun.switchFun(1) //-1

 

하지만 모드 브라우저에서 모듈 시스템을 지원 하지 않기때문에 

HMTL에서 script의 src를 작성 할 때 키워드를 넣어줘야 한다.

<!-- index.html -->
<script type="module" src="main.js"></script>

 

이래서 웹팩이 필요.

웹팩은 다음글에...