More than 1 year has passed since last update.

お話

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つを動かすのに無駄に数時間悩んだので、誰かの助けになれれば幸いです。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.