現象
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.js
の resolve
に alias
を追加する。
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 内でもうまくいくようになる。