브라우저 콘솔에서 Require를 사용할 수 있도록 만든 소스

window.require = async (module, cdn) => {
	const at = Date.now(), rd = Math.ceil(Math.random() * (99999 - 10000)) + 10000, id = `${module}_${at}_${rd}`
	return new Promise((resolve) => {
		if (document.querySelector(`#${id}`)) { return document.querySelector(`#${id}`) }
		const s = document.createElement('script')
		s.src = (cdn || `https://cdn.jsdelivr.net/npm/${module}`), s.id = id, s.type = 'text/javascript'
		document.head.appendChild(s)
		s.addEventLister('load', () => resolve(s))
	})
}

 

JSONP방식으로 script를 헤더에 간단히 생성한다.

전역을 오염시키는 플러그인(jQuery, lodash 등)과 같은 친구들을 선호하시는 분들이라면 콘솔에서 사용가능하도록 구성할 수 있습니다. 사용방법은 간단합니다.

 

require('jquery')

require('lodash')

라고 치면 간단하게 이용됩니다. es6문법으로 이루어져있거나 빌드 형태를 취해 운용되는 js모듈과는 호환되지 않습니다. (React 불러오면 깨집니다.)