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

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

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

no image

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

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

no image

jQueryの書き方について

jQueryの書き方は一般的に以下のように書きます。

上記の処理ですが、細かく書くとDOMが構築されてから実行という意味が含まれていま …

no image

cssフレームワークをnode_modulesから読み込む+cssの拡張

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

no image

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

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

アーカイブ