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

AngularJSでのDB接続

AngularJSでデータベースへのアクセスをしたいときの処理を記述します。 注意点としては、なんといっても非同期なことです。同期させることも無理ではないようですが、基本非同期ですので、この点を理解し …

no image

途中入力離脱防止処理 JavaScript

WordPressの入力画面なんかでは実装されていますが、途中で文字入力をしてページりだすをしようとするとブラウザのアラートがでます。これも一般のお問い合わせフォームなんかでも実装可能です。 この場合 …

no image

クロスドメインがらみのajax

ajaxで別ドメインに対して、プログラムを実行したい時に注意すべきことなどを。 Contents1 ログ、レスポンスヘッダをとにかく追う2 特定ドメインからの許可3 フレームワーク側での認証ロジック( …

no image

Angularでのイベント+改行+echoでのバッファサイズ変更

Contents1 Angularのイベント処理2 Angularでの改行ネタ3 echoでのバッファサイズ変換 Angularのイベント処理 Angularを使っていて楽なのはHTMLタグにインベン …

no image

Promiseを使った非同期処理

今回はPromiseを使った非同期処理について。 JavaScriptでの非同期処理ですが、処理1、処理2があった場合、よく言われるコールバック地獄になってしまいます。うまく関数化すればそうでもない気 …