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

font-awesomeのインストール(タスクランナー経由)

fontawesomeをタスクランナー経由でインストールすることについて。 CDNでインストールするだけならURL張り付けるだけですが。 インストール まずnpmで下記コマンドでインストールをします。 …

no image

JavaScriptでのオブジェクト指向 クラス作成&インスタンス生成

JavaScriptというと一般的にはjQueryを使って画面の装飾をするスクリプト言語という認識が一般的かと思います。 しかし、JavaScriptでもPHPなどのようにオブジェクト指向的な思想は実 …

no image

クリック編集のjQuery

最近のWEBサービスだと表示の画面と編集画面が同じになっていて、一見表示なんだけど、クリックすると特定の項目は編集できる、そんな画面がふえていきていますよね。 先日社内アプリをつくっていたところ、そう …

no image

vue-routerと認証など

vue-routerで簡単な認証に関する処理など。 例によって https://github.com/umanari145/admin_tool を題材に。 Contents1 サーバーサイドとのルー …

no image

AngularJSでのHtmlFormオプション+Filter

AngularJSにてHTMLのFormオプションの書き方など。 Contents1 HTMLオプション1.1 プルダウン1.1.1 配列型1.1.2 ラベル型1.2 チェックボックス1.3 ラジオ1 …

アーカイブ