ソース| http://www.fly63.com/article/detial/4015
毎日、何百万人もの開発者がプロジェクトを構築するためにnpmやyarnを使用しています。npm initやnpx create-response -appなどのコマンドを実行することは、クライアントまたはサーバー、デスクトップアプリケーションのいずれの場合でも、jsプロジェクトをビルドするためのほぼ推奨される方法です。
しかし、npmはプロジェクトの初期化やパッケージのインストール以上のものです。この記事では、簡単なショートカットからカスタムスクリプトまで、npmを最大限に活用するためのnpmの13のヒントを紹介します。
私たちの多くは毎日npmを使用しているため、少しの時間の節約でも長期的には大きな影響を与える可能性があります。これらのヒントは初心者および中級開発者向けですが、経験豊富な開発者であっても、これまでに経験したことのない1つまたは2つの機能が見つかることを願っています。
メインコンテンツ
基本的なショートカットを学ぶ
デフォルトのnpm initプロパティを設定する
プラットフォーム間でスクリプトに互換性を持たせる
スクリプトを並行して実行する
別のディレクトリでスクリプトを実行する
ポートの準備ができるまでスクリプトの実行を遅らせます
利用可能なスクリプトをリストして選択する
スクリプトを実行する前後
アプリケーションのバージョンを制御する
コマンドラインからpackage.jsonを編集する
githubリポジトリを自動的に設定して開く
カスタムnpm initスクリプト
カスタムnpm initスクリプトを使用して最初のコミットをGitHubに送信する
1.基本的なショートカットを学ぶ
最も基本的なものから始め、最も一般的なnpmショートカットを学ぶことで、長期的には多くの時間を節約できます。
インストール—従来：npmインストール、省略形：npm i。
テスト—従来型：npmテスト、省略形：npm t。
ヘルプ—一般：npm --help、省略形：npm -h。
グローバルフラグ-従来型：--global、省略形：-g。
開発の依存関係として保存-General：-save-dev、省略形：-D。
npm initデフォルト値-一般：npm init --yesまたはnpm init --force、省略形：npm init -yまたはnpm init -f
-saveまたは-Sを使用してパッケージを保存することはわかっていますが、これがデフォルト値です。保存せずにパッケージをインストールするには、-no-saveフラグを使用できます。
あまり一般的ではないショートカット
次のようないくつかの変わったショートカットがあります：
インストールパッケージ情報は、optionalDependencies（オプションのフェーズの依存関係）に追加されます。従来：--save-optional、省略形：-O。
指定されたモジュールバージョン一般を正確にインストールします：--save-optional、省略形：-O。
npmパッケージをローカルに保存する必要がある場合、または1回のファイルダウンロードで利用可能なパッケージのグループを選択する必要がある場合は、-save-bundleまたは-Bを使用してそれらをバンドルし、npm packを使用してバンドルを取得できます。
ルートショートカット
シンボルは通常、アプリケーションのルートディレクトリ、npm用語のアプリケーションエントリポイント、つまり、package.jsonで「main」として指定された値を表すために使用されます
{ "main": "index.js"}
このショートカットは、npx create-react-appなどのコマンドにも使用できます。したがって、npx create-react-app my-appで新しいmy-appディレクトリを作成する代わりに、npx create-react-appを実行できます。
2.デフォルトのnpm initプロパティを設定します
npm initを実行して新しいプロジェクトを開始するとき、何度も何度も構成の詳細を入力することがあります。あなたがプロジェクトの主な担当者であるとします。時間を節約するために、これらのフィールドのデフォルト値を次のように設定できます：
npm config set init.author.name "Joe Bloggs"npm config set init.author.email "[email protected]"npm config set init.author.url "Joebloggs.com"npm config set init.license "MIT"
これらの属性が正しく追加されているかどうかを確認するには、ターミナルでnpm config editと入力して、構成ファイル情報を表示します。もちろん、開いている設定ファイルで直接情報を編集することもできます。グローバルnpm設定を編集する場合は、npm config edit -gを使用します。
デフォルト設定を再初期化するには、次のスクリプトを使用できます。1行目は構成ファイルを空の文字列に置き換え、2行目は構成ファイルにデフォルト設定を再設定します。
echo "" > $(npm config get userconfig)npm config edit
上記のスクリプトはユーザーのデフォルト値をリセットし、次のスクリプトはグローバルなデフォルト値をリセットします
echo "" > $(npm config get globalconfig)npm config --global edit
3.プラットフォーム間でスクリプトに互換性を持たせる
コマンドラインで実行されるコードは、特にWindowsとUNIXベースのシステム（MacとLinuxを含む）の間で互換性の問題のリスクがあります。特定のプロジェクトのみを扱う場合、これは問題ではありませんが、多くの場合、クロスプラットフォームの互換性が必要です。オープンソースプロジェクトまたはコラボレーションプロジェクト、およびサンプルプロジェクトとチュートリアルプロジェクトは、オペレーティングシステムに関係なく機能するはずです。それは何ですか。
ありがたいことに、解決策は簡単です。いくつかのオプションから選択できますが、クロス環境が最適です。npm i -D cross-envを使用して、開発依存関係としてインストールします。次に、次のように、環境変数の前にキーワードcross-envを含めます。
{ "scripts": { "build": "cross-env NODE_ENV=production webpack --config build/wepack.config.js" }}
cross-envは、クロスプラットフォーム互換性を実現するための最もシームレスな方法ですが、クロスプラットフォーム互換性の実現に役立つ他の一般的なツールが2つあります。
rimrafをグローバルにインストールして、クロスプラットフォームのスクリプトを実行できます
ShellJSは、Node.js API上のUnixシェルコマンドのポータブルな実装です。
4.スクリプトを並行して実行する
&&を使用して、2つ以上のプロセスを順番に実行できます。しかし、スクリプトの並列実行についてはどうですか？このために、さまざまなnpmパッケージから選択できます。同時実行およびnpm-run-allが最も一般的なソリューションです。
最初に、npm i -Dを使用して開発の依存関係を同時にインストールします。次に、次の形式でスクリプトに追加します。
{ "start": "concurrently \"command1 arg\" \"command2 arg\""}
5.異なるディレクトリでスクリプトを実行する
場合によっては、異なるフォルダーに複数のpackage.jsonファイルを含むアプリケーションがあります。スクリプトを実行するたびに別のフォルダに移動する代わりに、ルートディレクトリからこれらのスクリプトにアクセスすると便利です。これを行うには2つの方法があります。
1つ目は、手動でcdして対応するコマンドを実行することです。
cd folder && npm start && cd ..
しかし、--prefixフラグを使用してパスを指定するという、より洗練されたソリューションがあります。
npm start --prefix path/to/your/folder
以下は、動作中のアプリケーションでのこのソリューションの例です。npmstartをフロントエンド（クライアントディレクトリ）とバックエンド（サーバーディレクトリ）で実行します。
"start": "concurrently \"(npm start --prefix client)\" \"(npm start --prefix server)\"",
6.ポートの準備ができるまでスクリプトの実行を遅らせる
通常、フルスタックアプリケーションの開発中に、サーバーとクライアントを同時に起動したい場合があります。待機ノードモジュールは、特定のプロセスの準備ができているときにのみプロセスが発生することを保証する便利な方法を提供します。この例では、特定のポートがあります。
たとえば、これは、Reactフロントエンドを使用してElectronプロジェクトで使用した開発スクリプトです。同時に、スクリプトはプレゼンテーションレイヤーと電子ウィンドウを並行して読み込みます。ただし、ウェイトオンを使用すると、Electronウィンドウはhttp：// localhost：3000で起動したときにのみ開かれます。
"dev": "concurrently \"cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",
さらに、Reactはデフォルトでブラウザーウィンドウを開きますが、Electron開発の場合、これは不要です。この動作を無効にするには、環境変数BROWSER = noneを渡します。
7.利用可能なスクリプトを一覧表示して選択します
package.jsonファイルで使用可能なスクリプトのリストは簡単です。プロジェクトのルートディレクトリに移動し、ターミナルでnpm runと入力するだけです。
しかし、スクリプトのリストを取得してすぐにリストを実行するより便利な方法があります。これを行うには、NTL（npmタスクリスト）モジュールをグローバルにインストールします。
npm i -g ntl
次に、プロジェクトフォルダーでntlコマンドを実行します。使用可能なスクリプトのリストを取得し、実行するスクリプトを選択できます。
8.スクリプトを実行する前後
ビルドスクリプトの前または後に実行するコードを定義できるprebuildやpostbuildなどのスクリプトに慣れているかもしれません。ただし、実際には、カスタムスクリプトを含め、スクリプトの前にpreおよびpostを追加できます。
これにより、コードがよりクリーンになるだけでなく、事前スクリプトと事後スクリプトを別々に実行することもできます。
9.アプリケーションのバージョンを制御する
アプリケーションのバージョンを手動で変更する場合と比較して、npmには、これを実行するための便利なショートカットがいくつか用意されています。バージョンを上げるには、npmバージョンとメジャー、マイナー、またはパッチを実行してください `：
// 1.0.0npm version patch// 1.0.1npm version minor// 1.1.0npm version major// 2.0.0
アプリケーションを更新する頻度に応じて、デプロイするたびにバージョン番号を増やすことで時間を節約できます。次のスクリプトを使用します。
{ "predeploy": "npm version patch"}
10.コマンドラインからpackage.jsonを編集します
package.jsonは通常のjsonファイルなので、ツールライブラリjsonを使用してコマンドラインから編集できます。これにより、package.jsonを変更する別の新しい方法が提供され、デフォルト値を超えるショートカットを作成できます。グローバルインストール：
npm install -g json
次に、それを-Iを使用してインプレース編集するために使用できます。たとえば、値が「bar」の新しいスクリプト「foo」を追加するには、次のように記述します。
json -I -f package.json -e 'this.scripts.foo="bar"'
11. githubライブラリを自動的に設定して開く
package.jsonファイルに「リポジトリ」がある場合は、npm repoと入力してデフォルトのブラウザで開くことができます。
プロジェクトがリモートリポジトリに接続され、gitがコマンドラインにインストールされている場合、このコマンドを使用して、接続されているリポジトリを見つけることができます。
git config --get remote.origin.url
さらに良いことに、上記のヒントに従ってjsonモジュールをインストールすると、以下のスクリプトを使用して、package.jsonに正しいリポジトリを自動的に追加できます。
json -I -f package.json -e "this.repository=\"$(git config --get remote.origin.url)\""
12. npm initスクリプトをカスタマイズする
さらに一歩進んで、GitHubリポジトリのURLを受け入れ、最初のコミットを自動的にプッシュする独自のnpm initスクリプトを使用します。このヒントでは、カスタムnpm initスクリプトを作成する方法について説明します。次の（そして最後の）トリックでは、gitをマージします。
ホームディレクトリの.npm-init.jsファイルにリダイレクトすることで、npm initスクリプトを編集できます。（Windowsでは通常、c / Users / <ユーザー名>、Macでは/ユーザー/ <ユーザー名>です）。
まず、ホームディレクトリに.nmm-init.jsファイルを作成します。npm initが正しいファイルを指していることを確認するには、次を実行します。
npm config set init-module ~\.npm-init.js
gitを統合する前に、デフォルトのnpm init問題をシミュレートする単純な.npm-init.jsファイルがあります。
module.exports = { name: prompt('package name', basename || package.name), version: prompt('version', '0.0.0'), decription: prompt('description', ''), main: prompt('entry point', 'index.js'), repository: prompt('git repository', ''), keywords: prompt(function (s) { return s.split(/\s+/) }), author: prompt('author', 'Joe Bloggs <[email protected]> (joebloggs.com)'), license: prompt('license', 'ISC')}
各質問はnameInPackageパターンに従います：prompt（ 'nameInPrompt'、 'defaultValue'）。デフォルトで問題なく値を設定するには、promptメソッドを削除するだけです。
デフォルト設定に戻したい場合は、.npm-init.jsを削除してください。
13.カスタムnpm initスクリプトを使用して、最初のコミットをGitHubに送信します
gitコマンドを.npm-init.jsファイルに組み込むには、コマンドラインを制御する方法が必要です。これには、child_processモジュールを使用できます。execSync関数のみが必要なため、ファイルの先頭にそれを導入します。これにより、代入構文を分解して使用できます。
const { execSync } = require('child_process');
関数の結果をコンソールに出力するヘルパー関数も作成しました。
function run(func) { console.log(execSync(func).toString())}
最後に、GitHubリポジトリのURLを入力するように求められます（提供されている場合）、README.mdファイルを生成し、最初のコミットを開始します。
repository: prompt('github repository url', '', function (url) { if (url) { run('touch README.md'); run('git init'); run('git add README.md'); run('git commit -m "first commit"'); run(`git remote add origin ${url}`); run('git push -u origin master'); } return url;})
一般に、.npm-init.jsファイルはおおよそ次のとおりです。
const { execSync } = require('child_process');
function run(func) { console.log(execSync(func).toString())}
module.exports = { name: prompt('package name', basename || package.name), version: prompt('version', '0.0.0'), decription: prompt('description', ''), main: prompt('entry point', 'index.js'), keywords: prompt(function (s) { return s.split(/\s+/) }), author: prompt('author', 'Joe Bloggs <[email protected]> (joebloggs.com)'), license: prompt('license', 'ISC'), repository: prompt('github repository url', '', function (url) { if (url) { run('touch README.md'); run('git init'); run('git add README.md'); run('git commit -m "first commit"'); run(`git remote add origin ${url}`); run('git push -u origin master'); } return url; }),}
package.jsonファイル：
{ "name": "Custom npm init", "version": "0.0.0", "decription": "A test project, to demonstrate a custom npm init script.", "main": "index.js", "keywords": [], "author": "Joe Bloggs <[email protected]> (joebloggs.com)", "license": "ISC", "repository": { "type": "git", "url": "git+https://github.com/JoeBloggs/custom.git" }, "bugs": { "url": "https://github.com/JoeBloggs/custom/issues" }, "homepage": "https://github.com/JoeBloggs/custom#readme"}
また、GitHub APIをマージして、新しいリポジトリを作成する必要がないようにすることもできます。この部分はあなたに任されています。
一般に、この記事がnpmで実現できることのアイデアを提供し、一般的なショートカットを知っているか、スクリプトpackage.jsonをフル活用するか、またはnpm initのバージョンを定義します。
交換留学
パブリックアカウント[フロントエンドユニバース]をフォローして、毎日良い記事の推奨事項を入手してください
WeChatを追加し、グループに参加してコミュニケーションする
「監視と転送」が最大のサポート