jquery-ui と webpack の微妙な関係

2018/02/22   #webpack  #jquery 
このエントリーをはてなブックマークに追加

現象

jquery-ui の autocomplete と knockout.js をつなぐ knockout-jqAutocomplete というライブラリを使っているところで、

how to use this with webpack and npm? · Issue #38 · rniemeyer/knockout-jqAutocomplete

と同じような現象に遭遇。

knockout-jqAutocomplete.js 内で Can't resolve 'jquery-ui/autocomplete' とか怒られる。
もちろん jquery-ui は npm install 済みにもかかわらず、だ。

解決方法

jzaefferer/webpack-jquery-ui: How to build an app with jQuery UI and webpack

によると、jquery-ui を webpack で取り込んで使うにはちょっと細工がいるらしい。

webpack.config.jsresolvealias を追加する。

resolve: {
	alias: {
		'jquery-ui': 'jquery-ui/ui/widgets',
		'jquery-ui-css': 'jquery-ui/../../themes/base'
	}
}

css のところ、 ../../ あたりがミソっぽい。
こうしておくと、require の際に

require('jquery-ui-css/core.css');
require('jquery-ui-css/menu.css');
require('jquery-ui-css/autocomplete.css');
require('jquery-ui-css/theme.css');
var autocomplete = require('jquery-ui/autocomplete');

という感じで認識されるらしい。
webpack じゃなく普通に使う場合にはこのように require するみたいなので、それに合わせてやる形になり、 knockout-jqAutocomplete 内でもうまくいくようになる。