webpack 내부의 class를 자바스크립트에서 new 할 수 있도록 하기

webpack_class_new.md

개요

• 일반적으로 webpack을 생성하면 DOM이 완성된 뒤에 javascript에서 해당 클래스를 다음과 같이 생성할 경우 오류 발생

var params = new AcpParams();
// 오류 발생
// Uncaught TypeError: AcpParams is not a constructor at <anonymous>:1:20

방법

• 다음과 같이 window.AcpParams에 _AcpParams 클래스의 생성자 포인터를 저장

class _AcpParams {
  constructor() {
    this._parmas = new acpScriptDataCenter.AcpScriptDataCenter();
  }

  setType(type) {
    this.put('type', type);
  }

  put(key, value) {
    this._parmas.setValueForKey(key, value, true);
  }

  build() {
    // Todo type별 validate 진행
  }
}

window.AcpParams = _AcpParams;

export default _AcpParams;

• 브라우저 console 창에서 window.AcpParams 입력하고 엔터를 입력하면 다음과 같이 소스코드가 삽입되어 있음

window.AcpParams
ƒ _AcpParams() {
    _classCallCheck(this, _AcpParams);

    this._parmas = new _contentProvider_script_acpScriptDataCenter__WEBPACK_IMPORTED_MODULE_0__["default"].AcpScriptDataCenter();
  }

• new로 생성

// 콘솔 입력
var params = new AcpParams();
// params 콘솔 입력
params
_AcpParams {_parmas: AcpScriptDataCenter}
_parmas: AcpScriptDataCenter {_param: {…}}
__proto__: Object