npm経由でjQueryやDatepickerなど一般的なライブラリをrequireしてビルドする手法について。
以前も下記エントリーで書きましたが、再学習。
環境はLaravelとかではなくnpmが入って入ればOKとします。
事前準備
gulpなどを使用しても良いですが、単なるJavaScriptのビルドだけでしたらwebpackがいいようです。
|
1 |
npm install webpack webpack-cli |
また、入れたいライブラリを
|
1 |
npm install ライブラリ名 |
でインストールします。自分の場合は、jquery以外にmoment,datepicker(jquery-ui),select2などを使いたいため、下記コマンドを実行しました。
|
1 2 3 |
npm install jquery-ui npm install select2 npm install moment |
ビルドに必要なライブラリができたところで、下記のようにビルドの元となるjsを作ります。
main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var $ = require('jquery'); var moment = require('moment'); require('jquery-ui/ui/widgets/datepicker'); //datepickerは日本語かする場合にこれが必要 require('jquery-ui/ui/i18n/datepicker-ja'); require('select2'); $(function(){ var obj = $("#hogehoge"); var timeStr = moment().format('YYYY-MM-DD'); console.log(timeStr) $('.datepicker').datepicker(); $('.select2').select2(); }); |
これをビルドするために下記コマンドを実行します。
|
1 |
npx webpack --mode development main.js --output bundle.js |
これでbundle.jsと言うファイルに読み込まれた結果が吐き出されます。
–modeに関しては調査中ですが、開発と本番を分けたりすることができるようです。
あとはbundler.jsを読み込めば、無事datepickerやselect2などを使うことができます。
npmとwebpack4でビルド – jQueryからの次のステップ
ちなみに上記のようにdatepickerを稼働させるためには下記のようにcss側の処置も必要です。
|
1 2 3 4 5 6 |
//UIに関しては別途sassの読み込みが必要 npm install jquery-ui-sass //sass側で下記のようにcss側でコンパイルが必要＋変数を変えないとアイコンが読み込めないことが多い $ui-icon-font-path: "XXXXX/fonts/vendor/jquery-ui-sass/"; @import "node_modules/jquery-ui-sass/assets/sass/jquery-ui.scss"; |
また反映されているかを確かめるためにブラウザのキャッシュをクリアしましょう。
[…] npmでのjQueryライブラリの読み込み […]