README.md

소개

브라우저의 console에서 npm 패키지를 사용할 수 있도록 해주는 코드입니다.

사용법

afterLoader.js를 콘솔에서 실행하면 prompt 창이 뜹니다. 여기에 원하는 패키지 이름을 입력하면 해당 패키지를 콘솔에서 이용할 수 있습니다.

북마크

afterLoader.bookmark 의 내용을 북마크 해두면 편리하게 로드할 수 있습니다.

현재 상태

아직 실험적입니다.

afterLoader.bookmark

javascript:(function()%7Bfunction%20setCookie(name%2C%20value%2C%20exp)%20%7Bvar%20date%20%3D%20new%20Date()%3Bdate.setTime(date.getTime()%20%2B%20exp*24*60*60*1000)%3Bdocument.cookie%20%3D%20name%20%2B%20'%3D'%20%2B%20value%20%2B%20'%3Bexpires%3D'%20%2B%20date.toUTCString()%20%2B%20'%3Bpath%3D%2F'%3B%7Dfunction%20getCookie(name)%20%7Bvar%20value%20%3D%20document.cookie.match('(%5E%7C%3B)%20%3F'%20%2B%20name%20%2B%20'%3D(%5B%5E%3B%5D*)(%3B%7C%24)')%3Breturn%20value%3F%20value%5B2%5D%20%3A%20null%3B%7Dvar%20afterLoaderModuleNames%20%3D%20getCookie('afterLoaderModuleNames')%3Bvar%20module_name%20%3D%20prompt('module%20name%3F%20(e.g.%20lodash%2Cjquery)'%2C%20afterLoaderModuleNames%20%3F%20afterLoaderModuleNames%20%3A%20'')%3BsetCookie('afterLoaderModuleNames'%2C%20module_name)%3Bvar%20modules%20%3D%20module_name.split('%2C')%3Bfor(var%20i%3D0%3B%20i%3Cmodules.length%3B%20i%2B%2B)%7Bvar%20s%20%3D%20document.createElement(%20'script'%20)%3Bs.setAttribute('src'%2C%20'https%3A%2F%2Fbundle.run%2F'%2Bmodules%5Bi%5D)%3Bs.setAttribute('onload'%2C%20%60console.log('loaded%20%3A'%2C%20'%24%7Bmodules%5Bi%5D%7D')%60)%3Btry%7Bdocument.body.appendChild(%20s%20)%3B%7D%20catch(e)%7Bdebugger%3B%7Dconsole.log(modules%5Bi%5D%2B'%EB%A5%BC%20%EB%A1%9C%EB%94%A9%20%EC%A4%91%EC%9E%85%EB%8B%88%EB%8B%A4.%20%EC%98%A4%EB%A5%98%EA%B0%80%20%EB%B0%9C%EC%83%9D%ED%95%98%EB%A9%B4%20%EB%8B%A4%EC%9D%8C%20%EC%A3%BC%EC%86%8C%EB%A5%BC%20%EC%A7%81%EC%A0%91%20%EB%B0%A9%EB%AC%B8%ED%95%B4%EC%84%9C%20%EC%BD%94%EB%93%9C%EB%A5%BC%20%EB%B6%99%EC%97%AC%EB%84%A3%EA%B8%B0%20%ED%95%B4%EC%A3%BC%EC%84%B8%EC%9A%94.%20https%3A%2F%2Fbundle.run%2F%20'%2Bmodules%5Bi%5D)%3B%7D%7D)()

afterLoader.js

function setCookie(name, value, exp) {
  var date = new Date();
  date.setTime(date.getTime() + exp*24*60*60*1000);
  document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/';
}
function getCookie(name) {
  var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
  return value? value[2] : null;
}
var afterLoaderModuleNames = getCookie('afterLoaderModuleNames');
var module_name = prompt('module name? (e.g. lodash,jquery)', afterLoaderModuleNames ? afterLoaderModuleNames : '');
setCookie('afterLoaderModuleNames', module_name);
var modules = module_name.split(',');
for(var i=0; i<modules.length; i++){
    var s = document.createElement( 'script' );
    s.setAttribute('src', 'https://bundle.run/'+modules[i]);
    s.setAttribute('onload', `console.log('loaded :', '${modules[i]}')`);
    try{
        document.body.appendChild( s );
    } catch(e){
        debugger;
    }
    console.log(modules[i]+'를 로딩 중입니다. 오류가 발생하면 다음 주소를 직접 방문해서 코드를 붙여넣기 해주세요. https://bundle.run/ '+modules[i]);
}