skillup

技術ブログ

JavaScript

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

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

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

前提条件としては

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

がされていればOKです。

最小構成でいうとgulp,gulp-webback,config.js(設定ファイル)が読み込めればOKです。※サンプルでは例としてjQueryを読み込んでいます。

sample_rs.js ビルドしたいjs

jQueryを読み込みオリジナルの処理をここに書きます。

config.js 設定ファイル

gulpfile.js ※ここでタスクを実行します。

下記コマンドを実行した後、上記の設定だとbuild.jsというコンパイルされたjsが作成されます。(この中にはjQueryももちろん入っています。)

sample.html コンパイルしたjsをよみこむhtml

ソース

https://github.com/umanari145/library/tree/master/resources

参考リンク

webpack初心者がJavaScriptをビルドするまでの手順

*ちなみにnpmのinstallはバージョン依存関係で結構こけます。

うまく行かずもう一度最初からやりたいときは以下のコマンドで。

 

 

-JavaScript
-,

執筆者:


comment

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

関連記事

no image

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

Angularをやるうえで前提となるJavaScriptの知識を書いていこうかと。 PHPでもありますが、関数を変数として扱い、別の関数の引数にすることができます。 これを利用すると下記のようなソース …

no image

JavaScriptでのDom操作に関して

画面系の複雑な処理をやる場合、JavaScriptを使うのですが、個人的に気をつけているポイントなど。 Contents1 ES6のクラス化2 DOM要素取得のポイント2.1 class自体でのスコー …

no image

モジュールバンドラparcelについて

現在のフロントエンドだと、es6以降の書き方が主流になっていることもあり、一度慣れてしまうとなかなか戻れない便利さがあります。 私の場合、設定が面倒だったり、Chromeではトランスパイルしなくても動 …

no image

ページャープラグイン dataTable

レコードを一覧表示する上で意外と面倒くさいのがページャーでしょう。 自力で作成してもよいのですが、なかなかこれが面倒だったりします。 また近年ではリンクを踏ませずに、スクロールするだけで表示ができる形 …

no image

JSでの金額変換で気をつけることなど

以前、ちょっと特集した JSでの画面の金額集計 の続きです。 画面で帳票系のアプリを作ろうとしている時など、画面上の値から金額の合計金額を出すなどがよく見られます。 すごく基本的ですが、PHPに慣れて …