webpackでビルドしたものをブックマークレットで読み込む

vue-cliで作ったVue.jsアプリをブックマークレットで使う遊びをしていて、 開発中はwebpackでビルドしたもの(npm run dev)を直接呼び出したかった。

面白さ

既存のWebページを書き換えたり、外部のAPIを叩いた結果を表示することができる。 それがVue.jsの技術で実現できる(楽しい)。

ちなみにブックマークレットで実現できるということはそのJSをscriptタグに追加するだけで既存のアプリを修正/拡張できるし なんならGoogleTagManagerに登録もできるということになる。

開発中(npm run dev)に使うブックマークレット

中身はこれ。

var loadScript = function(src, cb){
  var s = document.createElement('script');
  document.head.appendChild(s);
  s.onload = cb;
  s.src = src;
};
loadScript('http://localhost:8080/app.js')

ブックマークバーに直接ドラッグするならこのaタグ

load webpacked js

プロダクションビルド(npm run build)したものを使うブックマークレット

ビルドしたらdistをgh-pagesにでも置いて、そこへのパスを書けば良い。 index.htmlに書き出されているvendor.jsやcssも似た感じで読み込む必要がある。

中身はこれ。manifest.jsとvendor.jsとapp.js、app.cssがindex.htmlに記載されていた場合

var base = 'https://'; // GitHub Pagesへのパスなど
var manifest = base + 'js/manifest.js';
var vendor = base + 'js/vendor.js';
var appjs = base + 'js/app.js';
var style = base + 'css/app.css';
var loadScript = function(src, cb){
  var s = document.createElement('script');
  document.head.appendChild(s);
  s.onload = cb;
  s.src = src;
};

var loadStyle = function(src, cb, doc){
  if(!doc){
    doc = document;
  }
  var s = document.createElement('link');
  doc.head.appendChild(s);
  s.onload = cb;
  s.href = src;
  s.rel = 'stylesheet';
};

var styleTarget = window.document;
// App.vue記載のテンプレート(#app)が存在しないときだけ初期化する
if(!window.document.getElementById('app')){
  loadStyle(style, function(){
    loadScript(manifest, function(){
      loadScript(vendor, function(){
        loadScript(appjs, function(){
        });
      });
    });
  }, styleTarget);
}else{
  console.warn('vue has already loaded.');
}