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

jQueryの書き方について

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

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

no image

AngularJSについて

前回のbowerの記事でちょこっと書きましたが、最近はAngularJSというJavaScriptのフレームワークを触っています。 数年前から流行りだしているようで、少しずつ使っている方も増えているの …

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

no image

AngularJSでのHtmlFormオプション+Filter

AngularJSにてHTMLのFormオプションの書き方など。 Contents1 HTMLオプション1.1 プルダウン1.1.1 配列型1.1.2 ラベル型1.2 チェックボックス1.3 ラジオ1 …

no image

dataTableによる無限スクロール

Angularで無限スクロールをやったので一般のjqueryで。 dataTablesというプラグインです。 以前下記リンクで紹介していますが、ようわかっとらんかったんで(汗)再度書きます。 ページャ …