skillup

技術ブログ

JavaScript

npmでのjQueryライブラリの読み込み+datepickerメモ

投稿日:2018年4月30日 更新日:

npm経由でjQueryやDatepickerなど一般的なライブラリをrequireしてビルドする手法について。

以前も下記エントリーで書きましたが、再学習。

npmでのJSライブラリインストール&ビルド(※gulp使用時)

npmでのJSライブラリインストール&ビルド(※Laravel使用時)

環境はLaravelとかではなくnpmが入って入ればOKとします。

事前準備

gulpなどを使用しても良いですが、単なるJavaScriptのビルドだけでしたらwebpackがいいようです。

また、入れたいライブラリを

でインストールします。自分の場合は、jquery以外にmoment,datepicker(jquery-ui),select2などを使いたいため、下記コマンドを実行しました。

ビルドに必要なライブラリができたところで、下記のようにビルドの元となるjsを作ります。

main.js

これをビルドするために下記コマンドを実行します。

これでbundle.jsと言うファイルに読み込まれた結果が吐き出されます。

–modeに関しては調査中ですが、開発と本番を分けたりすることができるようです。

あとはbundler.jsを読み込めば、無事datepickerやselect2などを使うことができます。

npmとwebpack4でビルド – jQueryからの次のステップ

結構困ったwebpackのお話

ちなみに上記のようにdatepickerを稼働させるためには下記のようにcss側の処置も必要です。

 

また反映されているかを確かめるためにブラウザのキャッシュをクリアしましょう。

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

ケース別JavaScriptライブラリまとめ

Webエンジニアとしてはサーバーサイドのプログラムのみならず、JavaScriptをいじることがおおいでしょう。 私自身、昔はわけがわからず大嫌いだったんですが、最近はデバッグが楽なこともあり、結構愛 …

no image

JavaScriptライブラリ sugar

去年、JavaScriptの仕事をがりがりやった時にお世話になったライブラリsugar。 JavaScriptのライブラリというとunderscore.jsが有名ですが、こいつも結構使えるライブラリで …

no image

JavaScript 変数、配列、オブジェクト、スコープ、関数、オブジェクトの基本について

日頃業務で使っているJavaScriptについて。自分的なメモです。 Contents1 変数定義2 配列の定義2.1 展開3 オブジェクトの定義3.1 展開4 関数4.1 スコープ4.2 即時関数4 …