NPM
リファレンス
最新の仕様で開発できます
JavaScript specの急速な発展に比べて、ブラウザのサポート速度は常に遅れています.どんなに便利な規格でも、バーベルのようなツールの助けがなければ、それを実現するには十分ではありません.また、自動化されたフロントエンド開発環境は、Webパッケージ、NPMなどのノード技術を使用して作成された環境でのみ使用できます.
同様に,Typescript,SASSなどの高標準プログラミング言語でも専用の変換器が必要である.もちろんこれもノードjs環境のサポートの下でのみ、フロントエンド開発環境を作成できます.
自動化の構築
従来のように,符号化結果をブラウザに直接アップロードすることはあまり見られなかった.ファイルを圧縮したり、コードを乱読したり、多段文字を追加したりするなど開発以外の作業を経て配布します.Node.jsはこの一連の構築過程を理解するのに少なからぬ役割を果たした.それだけでなく、ライブラリ依存性の解決やさまざまなテストの自動化にも使用できます.
開発環境のカスタマイズ
各フレームワークで提供されるツールを使用すると、開発環境を簡単に入手できます.React.jsのCRA(create-act-app)を使用している場合は、Vuejsのvue-cliです.しかし、開発プロジェクトの状況はそれぞれ異なるため、ツールが使用できない場合も頻繁である.カスタマイズするには、ノード.jsの知識が必要です.環境が自動化ツールを使用できない場合は、環境を直接構築する必要がある場合があります.
その背景には、ノードがあります.jsはフロントエンド開発に必要な技術となっている.今回の連載はノードjsテクノロジーに基づいて,フロントエンド開発環境を理解し,自ら構成する内容を紹介する.
インタラクティブトップレベル(interactive toplevel)、ランキーシェル(language shell)
これは、単一のユーザの入力(例えば、単一の方法)を用いて評価(実行)し、結果をユーザに返す簡単なインタラクティブコンピュータプログラミング環境です.REPL環境で作成されたプログラムは各セグメントで実行される.(ウィキペディア)
開発プロジェクトには、外部ライブラリのダウンロードや構築など、一連のコマンドを自動的に実行することでプロジェクトを管理するツールがあります. PHPのComposerやJava Gradleなどのツールがこのようなプログラムです. NPMはJavaScriptベースのプロジェクトの構築ツールに相当する.NPMを利用して先端開発プロジェクトを構築する.
NPMはマルチシードコマンドを提供し、
Node.jsはpackagejsonファイルにプロジェクトのすべての情報を記録します.各項目の意味は以下の通りです.
name:プロジェクト名
バージョン:プロジェクトバージョンについて
Description:プロジェクトの説明
main:ノードアプリケーションのエントリポイントパス.フロントエンドアイテムの場合は使用しません.
scripts:プロジェクトコマンドを登録できます.初期化時のtestコマンドはサンプルとして登録されています
作者:プログラム作成者
license:ライセンス
通常はstart、test、install、uninstallを使用します.
start:アプリケーションの実行
テスト:テスト
Install:パッケージのインストール
アンインストール:パッケージの削除
フロントエンド開発環境を構築するために追加されたスクリプトはbuild,lint程度であるべきである.
build:ソース構築
lint:ソース会議のチェック
外部ライブラリを使用するのは自然なことです. の簡単な方法は、コンテンツ転送ネットワーク(CDN)が提供するライブラリを直接インポートすることである.htmlから応答のアドレスをロードします.
CDNサーバの障害で外部ライブラリが使用できなくなった場合、どうなりますか?アプリケーションサーバが正常であっても、必要なライブラリが入手できなければ、Webアプリケーションは正常に動作しません.
ライブラリコードを私たちのプロジェクトフォルダにダウンロードしたらどうですか?CDNを使用しないため、Webアプリケーションを障害から独立して提供できます.
しかし、このような状況もある.ライブラリは更新を続け、私たちのプロジェクトも最新バージョンに更新する必要があります.直接ダウンロードするたびに面倒になります.バージョンに基づいてサブ互換性を決定するには、多くのミスがあります.
ライブラリが1つの場所で更新でき、サブ互換性のあるセキュリティバージョンのみをダウンロードして使用できる場合はどうなりますか?
NPMは、任意の場所でライブラリを更新し、サブ互換性のあるセキュリティバージョンのみをダウンロードおよび使用してパッケージを管理します.
-npm installコマンドを使用して、外部パッケージをプロジェクトフォルダにダウンロードします.
プロジェクトで使用するパッケージのバージョンを厳しく制限したらどうなりますか?プロジェクトバージョンの仕事をするのは大変かもしれません.使用するパッケージをすべてバージョン化する必要があるからです.私たちのプロジェクトは現在のバージョンに適用されるかもしれません.
では、プロジェクトで使用しているパッケージのバージョンを緩めて問題を解決できますか?逆に、複数のバージョンにわたってコードを管理する必要があるという混乱に遭遇する可能性があります.
バージョン番号を管理するルールが必要です.このシステムは「意味のあるバージョン」と呼ばれます.
NPMは、この特定のバージョンに従ってパッケージバージョンを管理します.
有意義なバージョンは、プライマリ、セカンダリ、セカンダリの3つの数字の組み合わせでバージョンを管理します. にインストールされているREACTバージョンはv 17です.つまり、0.2ですが、メインバージョンは17、セカンダリバージョンは0、セカンダリバージョンは2です.
各バージョンの変更条件は次のとおりです.
プライマリ・バージョン:既存のバージョンと互換性がないように変更
マイナーバージョン(Minor version):既存のバージョンと互換性のある機能が追加されました.
パッチバージョン(Patch version):既存のバージョンと互換性のあるエラーが修正されました.
NPM管理バージョンは、有意義なバージョンリストだけでなく、独自のルールでバージョンの範囲を管理します.最も簡単なのは、特定のバージョンを使用する場合です.特定のバージョン以上またはそれ以下の場合は、 と明記してください.
ガジェット(~)と脱文字(^)を使用して範囲を指定
ティルト(~)
バイナリ・バージョンが指定されている場合は、パッチ・バージョンのみが変更されます.
例えば、
Minerバージョンが更新されていません
クララ(^)
正式バージョンでMinerとパッチのバージョンを変更します.
例えば、
正式バージョンに達していない
通常、パッケージのバージョンは、ライブラリの正式なバージョンよりも前に随時変更されます.セカンダリ・バージョンが0.1から0.2に変更されても、互換性を低下させることなく導入されることが多い.バージョン範囲を0とマークした場合、使用範囲は0.0.0～1.0.0以下であるため、下位互換性を満たすことができない0.2に更新される可能性があります.
逆に、CARATタグ^0.0を使用すると、バージョンは0.0～0.1.0に制限されます.したがって、より低い互換性を維持することができる.
NPMでパッケージをインストールすると、パッケージ化されます.CARAT方式でjsonインストールのバージョンを記録します.初期にはバージョン範囲でプロンプトを使用し、CARATを基本動作として導入しました.だから私たちが設定した反応は^v 17です.バージョン範囲は0.2タグで記録されています.
1.フロントエンド開発中のノード。なぜjsが必要なの?
最新の仕様で開発できます
JavaScript specの急速な発展に比べて、ブラウザのサポート速度は常に遅れています.どんなに便利な規格でも、バーベルのようなツールの助けがなければ、それを実現するには十分ではありません.また、自動化されたフロントエンド開発環境は、Webパッケージ、NPMなどのノード技術を使用して作成された環境でのみ使用できます.
同様に,Typescript,SASSなどの高標準プログラミング言語でも専用の変換器が必要である.もちろんこれもノードjs環境のサポートの下でのみ、フロントエンド開発環境を作成できます.
自動化の構築
従来のように,符号化結果をブラウザに直接アップロードすることはあまり見られなかった.ファイルを圧縮したり、コードを乱読したり、多段文字を追加したりするなど開発以外の作業を経て配布します.Node.jsはこの一連の構築過程を理解するのに少なからぬ役割を果たした.それだけでなく、ライブラリ依存性の解決やさまざまなテストの自動化にも使用できます.
開発環境のカスタマイズ
各フレームワークで提供されるツールを使用すると、開発環境を簡単に入手できます.React.jsのCRA(create-act-app)を使用している場合は、Vuejsのvue-cliです.しかし、開発プロジェクトの状況はそれぞれ異なるため、ツールが使用できない場合も頻繁である.カスタマイズするには、ノード.jsの知識が必要です.環境が自動化ツールを使用できない場合は、環境を直接構築する必要がある場合があります.
2. REPL (read-eval-print loop)
インタラクティブトップレベル(interactive toplevel)、ランキーシェル(language shell)
これは、単一のユーザの入力(例えば、単一の方法)を用いて評価(実行)し、結果をユーザに返す簡単なインタラクティブコンピュータプログラミング環境です.REPL環境で作成されたプログラムは各セグメントで実行される.(ウィキペディア)
3.プロジェクトの作成
開発プロジェクトには、外部ライブラリのダウンロードや構築など、一連のコマンドを自動的に実行することでプロジェクトを管理するツールがあります.
INIT
NPMはマルチシードコマンドを提供し、
initコマンドはプロジェクトを生成するために使用することができる. package.json
Node.jsはpackagejsonファイルにプロジェクトのすべての情報を記録します.各項目の意味は以下の通りです.
name:プロジェクト名
バージョン:プロジェクトバージョンについて
Description:プロジェクトの説明
main:ノードアプリケーションのエントリポイントパス.フロントエンドアイテムの場合は使用しません.
scripts:プロジェクトコマンドを登録できます.初期化時のtestコマンドはサンプルとして登録されています
作者:プログラム作成者
license:ライセンス
通常はstart、test、install、uninstallを使用します.
start:アプリケーションの実行
テスト:テスト
Install:パッケージのインストール
アンインストール:パッケージの削除
フロントエンド開発環境を構築するために追加されたスクリプトはbuild,lint程度であるべきである.
build:ソース構築
lint:ソース会議のチェック
4.パッケージのインストール
CDNの使い方
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
直接ダウンロードする方法
CDNサーバの障害で外部ライブラリが使用できなくなった場合、どうなりますか?アプリケーションサーバが正常であっても、必要なライブラリが入手できなければ、Webアプリケーションは正常に動作しません.
ライブラリコードを私たちのプロジェクトフォルダにダウンロードしたらどうですか?CDNを使用しないため、Webアプリケーションを障害から独立して提供できます.
しかし、このような状況もある.ライブラリは更新を続け、私たちのプロジェクトも最新バージョンに更新する必要があります.直接ダウンロードするたびに面倒になります.バージョンに基づいてサブ互換性を決定するには、多くのミスがあります.
ライブラリが1つの場所で更新でき、サブ互換性のあるセキュリティバージョンのみをダウンロードして使用できる場合はどうなりますか?
NPMの使用方法
NPMは、任意の場所でライブラリを更新し、サブ互換性のあるセキュリティバージョンのみをダウンロードおよび使用してパッケージを管理します.
-npm installコマンドを使用して、外部パッケージをプロジェクトフォルダにダウンロードします.
5.有意義なバージョン
プロジェクトで使用するパッケージのバージョンを厳しく制限したらどうなりますか?プロジェクトバージョンの仕事をするのは大変かもしれません.使用するパッケージをすべてバージョン化する必要があるからです.私たちのプロジェクトは現在のバージョンに適用されるかもしれません.
では、プロジェクトで使用しているパッケージのバージョンを緩めて問題を解決できますか?逆に、複数のバージョンにわたってコードを管理する必要があるという混乱に遭遇する可能性があります.
バージョン番号を管理するルールが必要です.このシステムは「意味のあるバージョン」と呼ばれます.
NPMは、この特定のバージョンに従ってパッケージバージョンを管理します.
有意義なバージョンは、プライマリ、セカンダリ、セカンダリの3つの数字の組み合わせでバージョンを管理します.
各バージョンの変更条件は次のとおりです.
プライマリ・バージョン:既存のバージョンと互換性がないように変更
マイナーバージョン(Minor version):既存のバージョンと互換性のある機能が追加されました.
パッチバージョン(Patch version):既存のバージョンと互換性のあるエラーが修正されました.
6.バージョン範囲
NPM管理バージョンは、有意義なバージョンリストだけでなく、独自のルールでバージョンの範囲を管理します.最も簡単なのは、特定のバージョンを使用する場合です.
>1.2.3 //더 높은 버전만 사용
>=1.2.3
<1.2.3
<=1.2.3
ガジェット(~)と脱文字(^)を使用して範囲を指定
ティルト(~)
バイナリ・バージョンが指定されている場合は、パッチ・バージョンのみが変更されます.
例えば、
~1.2.3タグは1.2.3〜1.3.0以下を含む.Minerバージョンが更新されていません
~0タグは0.0.0〜1.0.0以下を含む.クララ(^)
正式バージョンでMinerとパッチのバージョンを変更します.
例えば、
^1.2.3タグは1.2.3〜2.0.0以下を含む.正式バージョンに達していない
0.xバージョンでは、パッチのみが更新されます.^0タグは、0.0.0〜0.1.0未満を含む.逆に、CARATタグ^0.0を使用すると、バージョンは0.0～0.1.0に制限されます.したがって、より低い互換性を維持することができる.
NPMでパッケージをインストールすると、パッケージ化されます.CARAT方式でjsonインストールのバージョンを記録します.初期にはバージョン範囲でプロンプトを使用し、CARATを基本動作として導入しました.だから私たちが設定した反応は^v 17です.バージョン範囲は0.2タグで記録されています.
> npm view react versions
[
'0.0.0-375616788',
...,
'0.0.1',
'0.0.2',
'0.0.3',
'0.1.2',
'0.2.0',
'0.2.1',
'0.2.2',
'0.2.3',
'0.2.4',
'0.2.5',
'0.2.6',
'0.3.0',
'0.3.4',
'0.3.5',
'0.5.0',
'0.5.1',
'0.5.2',
'0.6.0',
'0.6.1',
'0.6.2',
'0.6.3',
'0.7.0',
'0.7.1',
'0.8.0',
'0.9.0-rc1',
'0.9.0',
'0.10.0-rc1',
'0.10.0',
'0.11.0-rc1',
'0.11.0',
'0.11.1',
'0.11.2',
'0.12.0-rc1',
'0.12.0',
'0.12.1',
'0.12.2',
'0.13.0-alpha.1',
'0.13.0-alpha.2',
'0.13.0-beta.1',
'0.13.0-beta.2',
'0.13.0-rc1',
'0.13.0-rc2',
'0.13.0',
'0.13.1',
'0.13.2',
'0.13.3',
'0.14.0-alpha1',
'0.14.0-alpha2',
'0.14.0-alpha3',
'0.14.0-beta1',
'0.14.0-beta2',
'0.14.0-beta3',
'0.14.0-rc1',
'0.14.0',
'0.14.1',
'0.14.2',
'0.14.3',
'0.14.4',
'0.14.5',
'0.14.6',
'0.14.7',
'0.14.8',
'0.14.9',
'0.14.10',
'0.15.0-alpha.1',
...
]
> type node_modules/react/package.json
{
...
},
"_requiredBy": [
"/"
],
"_resolved": "https://registry.npmjs.org/react/-/react-0.14.10.tgz",
"_shasum": "c10d7750f1c5b34eee2a123915ac4c14c01c1081",
"_spec": "react@~0",
"_where": "C:\\Users\\KIMAHHYUN\\npmTest\\sample",
"browserify": {
"transform": [
"envify"
]
},
"bugs": {
"url": "https://github.com/facebook/react/issues"
},
"bundleDependencies": false,
"dependencies": {
"envify": "^3.0.0",
"fbjs": "^0.6.1"
},
"deprecated": false,
"description": "React is a JavaScript library for building user interfaces.",
"engines": {
"node": ">=0.10.0"
},
"files": [
"LICENSE",
"PATENTS",
"addons.js",
"react.js",
"addons/",
"dist/",
"lib/",
"cjs/",
"jsx-runtime.js",
"jsx-dev-runtime.js"
],
"homepage": "https://facebook.github.io/react/",
"keywords": [
"react"
],
"license": "BSD-3-Clause",
"main": "react.js",
"name": "react",
"repository": {
"type": "git",
"url": "git+https://github.com/facebook/react.git"
},
"version": "0.14.10"
}
...
"version": "0.0.3"
}
Reference
この問題について(NPM), 我々は、より多くの情報をここで見つけました https://velog.io/@corone_hi/NPMテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol