パッケージ管理＠JavaScript¶
はじめに¶
本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。
01. Npmによる管理：Node Package Manager¶
セットアップ¶
▼ yumリポジトリから¶
# リポジトリの作成
$ curl -L https://rpm.nodesource.com/setup_<バージョン>.x | bash -
# nodejsのインストールにnpmも含まれる
$ yum install -y nodejs
package.jsonファイル¶
▼ author¶
パッケージの作成者名を設定する。
{
"author":
{
"name": "Hiroki Hasegawa",
"email": "example@gmail.com",
"url": "https://github.com/hiroki-hasegawa",
},
}
▼ bug¶
不具合の報告先のURLを設定する。
{"bugs": {"url": "https://github.com/hiroki-hasegawa/foo/issues"}}
▼ dependencies¶
本番環境と開発環境で依存するパッケージ名を設定する。
NPMに登録されていないパッケージは、『git+<GitHubリポジトリURL>』を指定する。
npm installコマンドの実行時に--productionオプションを有効化すると、dependenciesキーが使用される。
{
"dependencies":
{
"foo": "^1.1.1",
"bar": "^1.0.0",
"baz": "git+https://github.com/baz/baz-package.git",
},
}
▼ description¶
{"description": "This is foo package"}
▼ devDependencies¶
開発環境のみ依存するパッケージ名を設定する。
npm installコマンドの実行時に--productionオプションを有効化しないと、devDependenciesキーが使用される。
{
"devDependencies":
{
"foo": "^1.1.1",
"bar": "^1.0.0",
"baz": "git+https://github.com/baz/baz-package.git",
},
}
▼ directories¶
パッケージのディレクトリ構造を設定する。
docキーでドキュメントのパス、libでパッケージのパスを指定する。
{"directories": {"doc": "foo/doc", "lib": "foo/lib"}}
▼ engines¶
npmコマンドのバージョンを設定する。
使用するバージョンを強制し、他のバージョンではコマンドの実行で失敗する。
{"engines": {"node": "1.0.0", "npm": "1.0.0"}}
▼ homepage¶
パッケージを説明するWebサイトのリンクを設定する。
{"homepage": "https://example.com"}
▼ main¶
エントリポイントとなるファイルを設定する。
{"main": "index.js"}
▼ name¶
npmパッケージ名を設定する。
全てのnpmパッケージの中で、一意の名前である必要がある。
{"name": "foo"}
▼ repository¶
{
"repository":
{"type": "git", "url": "https://github.com/hiroki-hasegawa/foo.git"},
}
▼ scripts¶
汎用コマンドとエイリアスを設定する。npm run <エイリアス>コマンドで実行できる。
{"scripts": {"foo": "npm install"}}
▼ version¶
パッケージのバージョンを設定する。
{"version": "<バージョンタグ>"}
package.lockファイル¶
Composerのcomposer.lockファイルに相当する。
01-02. npmコマンド¶
init¶
▼ package.jsonファイルの作成¶
プロジェクトのpackage.jsonファイルを作成する。
$ npm init
install¶
▼ installとは¶
アプリケーションにて、package.lockファイルに実装されたパッケージのうちで、インスールされていないものをインストールする。
package.lockファイルのおかげで、リポジトリの利用者が、npm installの実行時に、共通のバージョンのパッケージをインストールできる。
$ npm install
指定したパッケージをインストールもできる。
$ npm install <パッケージ名>
▼ --force¶
パッケージのインストール時に、ディレクトリの実行権限不足でインストールが停止する場合がある。
これを無視してインストールを実行する。
$ npm install --force
▼ --save¶
デフォルトで有効化されている。
パッケージのインストール時に、dependenciesキーにパッケージ名とバージョンを書き込む。
$ npm install --save
▼ --save--dev¶
パッケージのインストール時に、devDependenciesキーにパッケージ名とバージョンを書き込む。
$ npm install --save--dev
update¶
▼ updateとは¶
全てのパッケージのバージョンを、package.jsonファイルの範囲内でアップグレードする。
$ npm update
run¶
▼ runとは¶
ユーザーが定義したエイリアスのコマンドを実行する。
$ npm run <エイリアス>
あらかじめ、任意のエイリアスをscriptsキー下に定義する。
エイリアスの中で、実行するコマンドのセットを定義する。
補足として、実行するコマンドの中で、再びnpm runコマンドも定義できる。
{
# コマンド
"scripts": {
# "<エイリアス>": "<実行するコマンド>",
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
},
}
NODE_OPTIONS¶
メモリ上限を設定する。
$ export NODE_OPTIONS="--max-old-space-size=2048"
02. Yarnによる管理¶
セットアップ¶
▼ aptリポジトリから¶
$ apt-get install yarn
▼ npmレジストリから¶
$ npm install --global yarn
package.jsonファイル¶
Npmと同じ。
yarn.lockファイル¶
Composerのcomposer.lockファイルに相当する。
02-02. yarnコマンド¶
add¶
▼ addとは¶
指定したパッケージのバージョンを、package.jsonファイルを無視してインストールする。
$ yarn add <パッケージ名>@<バージョンタグ>
特定のパッケージのバージョンを検証する場合は、yarn removeコマンドとyarn addコマンドを使用する。
$ yarn remove foo && yarn add foo@<バージョンタグ>
▼ --dev¶
パッケージのインストール時に、devDependenciesキーにパッケージ名とバージョンを書き込む。
$ yarn add <パッケージ名>@<バージョンタグ> --dev
audit¶
▼ auditとは¶
脆弱性のあるパッケージを検出する。
$ yarn audit
▼ level¶
検出する重要度を設定する。
$ yarn audit --level critical
build¶
本番環境用アプリをビルドする。
package.jsonファイルに定義があり、実際にはフレームワークの起動コマンド (例：Next.jsならnext buildコマンド) を実行している。
$ yarn build
install¶
▼ installとは¶
指定したバージョンのパッケージを、package.jsonファイルの範囲内でインストールする。
$ yarn install <パッケージ名>@<バージョンタグ>
▼ --check-files¶
必要なパッケージがnode_modulesディレクトリ内にインストールされているかを確認しつつ、不足があればinstallコマンドを実行する。
$ yarn install --check-files
▼ --production¶
package.jsonファイルのdevDependenciesキーのパッケージをインストールしない。
デフォルトでfalseである。
NODE_ENV変数にproductionを設定しても有効化できる。
$ yarn install --production
▼ --verbose¶
詳細な処理ログを出力する。
$ yarn install --verbose
dev¶
開発環境用アプリを起動する。
package.jsonファイルに定義があり、実際にはフレームワークの起動コマンド (例：Next.jsならnext devコマンド) を実行している。
lint¶
静的解析を実行する。
package.jsonファイルに定義があり、実際にはeslintコマンドを実行している。
$ yarn lint
list¶
指定したパッケージのバージョンを取得する。
$ yarn list --depth=0 | grep <パッケージ名>
remove¶
指定したパッケージをアンインストールする。
$ yarn remove <パッケージ名>
start¶
ビルド済みの本番環境用アプリを起動する。
package.jsonファイルに定義があり、実際にはフレームワークの起動コマンド (例：Next.jsならnext startコマンド) を実行している。
$ yarn build
upgrade¶
▼ upgradeとは¶
指定したパッケージをpackage.jsonファイルの範囲内でアップグレードする。
$ yarn upgrade <パッケージ名>@<バージョンタグ>
▼ latest¶
全てのパッケージを、package.jsonファイルを無視して最新までアップグレードする。
$ yarn upgrade --latest
03. モジュールバンドル¶
モジュールバンドルとは¶
▼ 読み込むパッケージをまとめる¶
jsファイルを読み込むscriptタグを1つにまとめる。
htmlファイルがブラウザにレンダリングされると、JavaScriptのファイルに対するリクエスト数が減るため、Webページの読み出しが早くなる。
＊例＊
以下のようなhtmlファイルがあるとする。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>webpack tutorial</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
モジュールバンドルは、scriptタグでのパッケージの読み出しをまとめる。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>webpack tutorial</title>
</head>
<body>
<!-- jQueryもバンドルされたファイル -->
<script src="js/bundle.js"></script>
</body>
</html>