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です。

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

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

JavaScriptのコールバック関数について

JavaScriptでのコールバック関数について。 たまにでてきますが、これまた慣れないと手間取ります。 コールバック関数に関してまとめると以下のような感じでしょうか。 ある関数(func1)の引数と …

no image

AngularJSでのDB接続

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

no image

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

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

no image

JavaScript 変数、配列、オブジェクト、スコープ、関数、オブジェクトの基本について

日頃業務で使っているJavaScriptについて。自分的なメモです。 Contents1 変数定義2 配列の定義2.1 展開3 オブジェクトの定義3.1 展開4 関数4.1 スコープ4.2 即時関数4 …

no image

無限スクロールプラグイン infinite scroll

無限スクロールのプラグインについていろいろ調べてきましたが、今回はテーブル形式でなく、通常の無限スクロールができるもの(イメージとしてはtwitterっぽい遷移。) infinte scroollとい …