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

JSでの画面の金額集計

主に金額などを画面で計算するような請求関係のアプリを作っていますと、JSを駆使して集計作業をすることが多いのではないかと思います。 ようはテーブルみたいなものがあり、それを集計するようなパターンです。 …

no image

携帯のUIに関して

いまさらながらスマホのUI表示に苦戦してます。 まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。 私の場合、デザインが本業でないこともあり、ちょっとサボっていまし …

no image

jQuery子要素の取得方法など

jQueryで要素を取得する方法って$(“セレクタ”)しか知らなかったんですが、他にもいろいろあることがわかったのでちょっと紹介。 例えばtrの列の中に横1列に<inpu …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

gulpに関して

gulpに関しての復習と色々と間違っていたところもあるのでまとめ。 ちなみに以前書いた記事は下記 gulpインストールとタスクの実行 Contents1 インストール2 タスクの実行3 npxコマンド …