main.js

// jquery 
import $ from 'jquery/dist/jquery.slim';

// 静的アセット(画像、CSSファイルなど)
import 'bootstrap/dist/css/bootstrap.css';
import './style.css';
import 'trumbowyg/dist/ui/trumbowyg.css';

// jQueryプラグイン関係のjsファイルは 末尾に ?url を付けてアセットとしてインポートさせ、
// 後から動的にscriptタグで注入する。
import trumbowygURL from 'trumbowyg/dist/trumbowyg.min.js?url';
import langURL from 'trumbowyg/dist/langs/ja.min.js?url';

// プラグインで使用する画像パスを取得
import svgPath from 'trumbowyg/dist/ui/icons.svg';

// windowにjQueryを登録
window.jQuery = $;

// jQueryプラグイン(trumbowyg)のロード
(() => {
  const params = {
    lang: 'ja',
    svgPath
  };
  scriptLoader(trumbowygURL)
    .then(() => scriptLoader(langURL))
    .then(() => $('#editor').trumbowyg(params));
})();

// jsファイルを <script>タグを使って読み込む
// Promise対応版
function scriptLoader(url)
{
  return new Promise((resolve,reject) => {
    try {
      const oScript = document.createElement('script');
      oScript.addEventListener('load', ev => resolve());
      oScript.setAttribute('src',url);
      document.body.appendChild(oScript);
    } catch(e) {
      reject(e);
    }
  });
}