skillup

技術ブログ

JavaScript

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

投稿日:2017年11月23日 更新日:

JavaScriptのインストールですが、いままではライブラリを1つ1つインストールしてました。

bowerでインストールしたこともあったんですが、読み込み自体は1つ1つしていました。

先日仕事でnpmを使ったインストールをしたことで、一気にライブラリをインストールする方法があったのでメモを。

npmに関しては下記の説明が一番わかりやすいかも。

いまさら聞けない!npmのこれだけは知っておきたい基礎知識

※Laravelでの使用を前提としています。

準備

  • nodeのインストール
  • npmのインストール

package.jsonというファイルに読み込むライブラリ群を記述します。

フレームワークなどだとすでにこのファイルがあることが多いですが、ない場合はnpm initで作成できます(質問にはすべてディフォルトでいいかと。)

その後、

というコマンドでインストールを行います。package-lock.jsonに記述されます。

ちなみにあとから個別のライブラリを追加したい場合は

と入力します。具体的なライブラリ名などはhttps://www.npmjs.com/で探しましょう。

実行後、package.jsonに記述されます。

ソース

ビルド元 ※Laravelだと下記のようになります。

resources/js/bootstrap.js(appのさらに元となるもの。Laravelにあるからそのままかきましたが、実際にはappだけでいいかもしれません。)

resources/js/app.js(bootstrapを読み込み実際のコアとなるJS。ここだけでもいいかも・・・)

resources/js/original.js(実際の処理の記述を書くJS)

上記がビルド元のファイルです。実際の処理はビルド後に書いてももちろんOKです。

*下記のように実際の処理をかくjsに書いてもOK。こちらの方が見やすいかも・・・・
resources/js/original.js(実際の処理の記述を書くJS)

下記リンク参考

npmでのjQueryライブラリの読み込み

このあと、タスクランナーで下記のように記述します。

webpack.mix.js

実際のビルドは

で行います。コンパイルされたjs(今回の場合public/pc/js/original.js)を読み込めばライブラリが使えます。

jqueryをはじめとして、ライブラリを1つ1つ読み込まなくていいので楽です。

参考リンク

npm とか bower とか一体何なんだよ!Javascript 界隈の文脈を理解しよう

もう、jQueryはnpmで管理しようぜ

3分でできるnpmモジュール

モジュール&npmのキホン 〜 JSおくのほそ道 #003

npm と Node.js 上で require を使ったモジュール読み込みの仕組みについてメモ

-JavaScript
-, ,

執筆者:


  1. […] JavaScriptを1ファイルでまとめて読み込める方法が分かったので(参考リンク npmでのJSライブラリインストール)、CSSでも似たような方法があったのでメモ。 […]

  2. […] こちらのリンクでJSのnpmパッケージでのインストール&ビルドをしたので、gulpでのビルドを。 […]

comment

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

関連記事

no image

AngularJSでのinfite_scroll

今回もAngularネタです。 一般的なデータの一覧画面ではページャーをボタンで移動するのではなく、スクロールするだけで次々とアクセスできるようになるのが一般的でしょう。 facebookやtwitt …

no image

vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。 既存のvueの記事 Vue.jsについて vueの環境構築 今まではCDNで読み込んだり、HTMLの中に直接vueを入れて …

no image

jQuery子要素の取得方法など

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

no image

jquery multipleについて(基本編)

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

no image

途中入力離脱防止処理 JavaScript

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