結構困ったwebpackのお話

お話

JavaScript Advent Calendar 2016 6日目の記事です。
webpackでjQuery Pluginを管理しようとするとうまくビルドできなくて結構困りました。
jQueryの導入、jQueryPluginの導入を通して悩んだポイントを紹介していきます。
基本的なwebpackの使い方、webpackとはなんぞや？については解説しません。

勉強になるサイト

• 公式サイト
• webpack で始めるイマドキのフロントエンド開発
• step by stepで始めるwebpack

前提

• webpack.config.jsを作成
• npmで必要なパッケージはインストール済み
• webpack.ProvidePluginでjQuery, jquery, $をaliasにjqueryを読み込んでいる

jQuery-UIのautocompleteを使う

// index.js
require('jquery-ui/ui/widgets/autocomplete');
$('[name="autocomplete-field"]').autocomplete({
  source: MY_SOURCE
});

• jquery-uiの場合複数の機能が一つのパッケージにまとめられているので、目的のscriptを直接requireしてくる必要がある
• npmの場合はnode_modules/jquery-uiの中身を見ればわかります

pickadateのDatePicker機能を使う

// webpack.config.js
// ... 省略
resolve: {
  alias: {
    'picker': 'pickadate/lib/picker'
  }
},
// ... 省略

// index.js
require('picker');
require('pickadate/lib/picker.date');
$('[name="datepicker-field"]').pickadate();

• pickadateのDatePicker機能を利用するためにはpicker本体とpicker.date両方が必要
• またpicker.dateの中でdefine( ['picker', 'jquery'], factory )しているためrequire('pickadate/lib/picker')のままではダメで、pickerでaliasを作成する必要がある

以上短いですが、私自身がこの2つを動かすのに無駄に数時間悩んだので、誰かの助けになれれば幸いです。