electronでjqueryとbootstrapをwebpackでまとめてみる

electron+baeblのテンプレートを作ってみた その１
http://qiita.com/umema4/items/1250ad632204acbd684c

electron+baeblのテンプレートを作ってみた その2(CSS周り)
http://qiita.com/umema4/items/597ed5ac2b5304d8a512

github
https://github.com/umema4/electron-babel6

今回はjqueryとbootstrapをスクリプトから呼ぶところを中心にすすめる

jqueryの設定

electronの公式では
http://electron.atom.io/docs/v0.36.7/faq/electron-faq/#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron
となっている

  webPreferences: {
    nodeIntegration: false
  }

を指定しているのでscriptタグから読み込み可能

  <script src="./node_modules/jquery/dist/jquery.js"></script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

からの

bootstrap.min.js:7 Uncaught Error: Bootstrap tooltips require Tether 

とエラー。bootstrap4ではTetherが必要なようなので
npmで追加する

npm install tether --save

これでOK

  <script src="./node_modules/jquery/dist/jquery.js"></script>
  <script src="./node_modules/tether/dist/js/tether.js"></script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

だけどnode_moduelsから読み込むのもいけてない気がするのでwebpackでまとめてしまう

webpackでvendorを下記のようにまとめる

    vendor: ['jquery', 'tether', 'bootstrap'],
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
      }),
      new webpack.ProvidePlugin({
        "window.Tether": "tether"
      }),
　    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js')
    ]

  <script src="./assets/vendor.bundle.js"></script>
  <script src="./assets/app.bundle.js"></script>

今回の修正コード
https://github.com/umema4/electron-babel6/commit/da804a8990bcec159fe008a4baad1ceaf33fe054

参照

https://webpack.github.io/docs/code-splitting.html
http://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack