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

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

JavaScriptのインストールですが、いままではライブラリを1つ1つインストールしてました。 bowerでインストールしたこともあったんですが、読み込み自体は1つ1つしていました。 先日仕事でnp …

no image

formのシリアライズ+return falseなど

ajaxでformの値を投稿しようとするとき、一つ一つの要素をjQueryでとっていたのですが、項目が多いとなかなか手間です。 そんな時、下記のメソッドで一気にフォーム要素を取得して投げることができま …

no image

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

こちらのリンクでJSのnpmパッケージでのインストール&ビルドをしたので、gulpでのビルドを。 前提条件としては nodeのインストール npmのインストール がされていればOKです。 最小構成でい …

no image

package.jsonによるタスクの実行

前回の記事でgulpによるタスクの実行を書きましたが、package.jsonでこれを行うこともできます。 てっきり依存ライブラリの記述だけかと思いますしたが、様々なタスクを実行できるようですね。イメ …

no image

switch(true)イディオム

switch文は通常、文字や数字で分岐をさせることが多いですが、実は条件式を入れることも可能です。 私の場合、正規表現を動的に変えたいケースがあり、検索したところ似たケースがありました。 http:/ …