NodeJS+NPMインストールと環境構成

13081 ワード

先端 Nodejs

node.msiインストール

NPM共通コマンド

構成

モジュール関連情報を表示

モジュールのインストール、expressモジュールを例に

npm初期化構築プロジェクト

NodeJSインストールソフトウェアのダウンロードは、nodejsおよびnpmを含む公式サイトでダウンロードできます.
node.msiインストール

インストール場所の変更:D:Program Files(x 86)odejsで

を正常にインストールできます.

取付完了後

ファイル/フォルダ

D:\Program Files (x86)
odejs

C:\Users\Administrator\AppData\Roaming
pm

を生成する.

生成変数

path-->C:\Users\Administrator\AppData\Roaming
pm

インストールに成功したかどうかを確認

検査NodeJS

$ node -v
v10.8.0

NPM

チェック

$ npm -v 
$ npm -version
6.2.0

NPM構成NPM構成情報チェック

$ npm config ls
; cli configs 
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/6.2.0 node/v10.8.0 win32 x64"

; builtin config undefined prefix = "C:\Users\Administrator\AppData\Roaming
pm"

; node bin location = D:\Program Files (x86)
odejs
ode.exe 
; cwd = C:\Users\Administrator 
; HOME = C:\Users\Administrator 
; "npm config ls -l" to show all defaults.

NPM構成情報を変更nodeホームでnode_を新規作成global(グローバルモジュールインストール)、node_Cache(cacheキャッシュ)フォルダグローバルモジュールインストール、cacheキャッシュパスの構成

npm config set prefix "D:\Program Files (x86)
odejs
ode_global" 
npm config set cache "D:\Program Files (x86)
odejs
ode_cache"

グローバルモジュール環境変数の構成:マイコンピュータ-プロパティ-詳細システム設定-詳細-環境変数システム変数の下に「NODE_PATH」、「D:Program Files(x 86)odejsode_globalode_modules」を新規作成し、NODE_を指定します.PATH環境変数、そして使用;複数の異なるディレクトリを分割NODE_PATHは、モジュールによって提供される経路を探すためのNODEの登録環境変数であり、NODE_PATHは複数のプロジェクトモジュール多重化のベストプラクティスを実現する.Nodeのパケットロードメカニズムは、プロジェクトのルート位置からnodeを再帰的に検索します.modulesディレクトリ、ファイルシステムルートディレクトリのnode_modules、まだ指定モジュールが見つからない場合はNODEへPATHに登録されているパスで検索します.Nodejsのパケットロードパス検索アルゴリズムに基づいて、グローバルインストール方式を採用して、私たちのパケットをグローバルにインストールすることができます.これにより、複数のプロジェクトがグローバルの依存パケットを共有することができます.
チェックNODE_PATHが配置に成功したかどうか:win+r、cmdを入力して車に戻り、Windowsコマンドウィンドウに入り、npm install express-gを実行し、expressモジュールのインストールに成功した後、nodeを入力し、nodeのREPL環境に入り、require(‘express’)を入力し、expressモジュールに関する情報が現れたら配置に成功した[email protected] added 50 packages from 47 contributors in 13.127s
ユーザ変数「PATH」の末尾に追加、「D:Program Files(x 86)odejsode_global」
オペレーティングシステムのPATH環境変数の作用、システムが1つの命令を呼び出す時、PATH変数の中で登録する経路の中で探して、もし登録する経路の中で呼び出すならば、さもなくば命令が探し当てていないことをヒントにして、“xxxは内部あるいは外部の命令ではありませんて、同じく実行することができるプログラムあるいはバッチのファイルではありません”、原因は環境変数PATHを配合していないのです
PATHが正常に配置されているかどうかをチェックします:win+r、cmdを入力して車に戻り、Windowsコマンドウィンドウに入り、インストールに成功したモジュールに対して、相応のコマンドを実行します.例えば、npm、cnpm、vue、webpack、関連出力情報が現れたら配置に成功します.
npmモジュールの登録、管理、パブリッシュアドレスをcnpmにリセット

 npm install cnpm -g

cnpmjs.org:Private npm registry and web for Company,cnpmはウェブサイトであり、cnpmもコマンドラインツールであり、エンタープライズクラスのプライベートnpmパッケージの登録地、管理、リリースの最初のインストールに問題が発生する可能性があります.

npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
D:\Program Files (x86)
odejs
ode_global\cnpm -> D:\Program Files (x86)
odejs
ode_global
ode_modules\cnpm\bin\cnpm
[email protected] added 630 packages from 837 contributors in 99.51s

解決方法:最後から2行目は、推奨されるバージョン変更コマンド:cnpm install [email protected]バージョン変更でモジュールのミラーアドレスをリセットできます:npm config set registry https://registry.npm.taobao.org公式アドレスregistry.npmjs.org設定エージェントnpm config set proxy http://server:portリセット
NPM共通コマンド
コンフィギュレーションnpm config;管理npmの構成パスnpm config ls -l;構成詳細情報npm config get prefix;グローバルモジュールインストールパスを表示prefixフィールドはグローバルbase path

npm config set prefix D:\develop
odejs
ode_global;

リセットグローバルモジュールインストールパス

npm config set cache D:\develop
odejs
ode_cache;

リセットグローバルモジュールキャッシュパス
モジュール関連情報の表示npm root;現在のプロジェクトパッケージ(モジュール)のインストールパスを表示するnpm root -g;システム内のnodeグローバルパッケージ(モジュール)のインストールパスを表示するnpm ls/list/la/li;現在のパスの下にインストールモジュールを表示するnpm ls -g;グローバルインストールモジュールを表示するnpm init;プロジェクト内でpackageの作成を指示する.jsonファイル、インストールパッケージの情報はプロジェクトのpackageに保持できます.jsonファイルでは、後続の他のプロジェクト開発や他の人が協力して使用できるようにします.npm help;コマンドの詳細を表示するヘルプnpm help install;システムデフォルトのブラウザまたはデフォルトのエディタでローカルnodejsインストールパッケージのファイルを開く(/nodejs/node_modules/npm/html/doc/cli/npm-install.html)npm packageName -v;ローカルにパッケージがインストールされているかどうかを確認するnpm list;現在のディレクトリのパッケージを表示するnpm list -g;グローバルディレクトリのパッケージを表示する
モジュールのインストール、expressモジュールを例にnpm install;プロジェクトルートパスの下でこのコマンドを実行すると、プロジェクトルートパスの下のnode_modulesにpackageにインストールする.jsonのすべての依存パケットnpm install express;インストールexpressパケットは、コマンドウィンドウの現在のディレクトリの下で、デフォルトで最新バージョンをインストールし、プロジェクトのpackageに情報を保持する.jsonファイルのnpm install [email protected];インストールexpressパッケージの3.2.0バージョンは、コマンドウィンドウの現在のディレクトリの下にあり、プロジェクトのpackageに情報を保持する.jsonファイル中のnpm install express --global/-g;インストールexpressモジュールは、グローバルディレクトリの下でnpm install express --save/-S;インストールパッケージを生産段階の依存に組み込む.jsonファイルのdependenciesフィールドの内容はnpm install express --save-dev/-D;インストールパッケージを開発段階の依存に追加し、package.jsonファイルのdevDependenciesフィールドの内容はnpm install express --save-optional/-O;インストールパッケージを追加してオプションの段階の依存に参加して、package.jsonファイルのoptionalDependenciesフィールドの内容増加モジュールアンインストールキーワードはuninstall、モジュール更新キーワードはupdate、モジュールが古いキーワードがoutdatedであるかどうかを確認します.
npm初期化構築プロジェクト
例えば、webpackテンプレートに基づくvueプロジェクト$ npm instll vue; $ npm install --global vue-cli; vueを構築するコマンドラインツール$ vue init webpack demo;コアコマンド$ cd demo $ npm instll;すべての依存パッケージ$ npm run dev;実行開発フェーズのプロジェクトをインストールするpackage.jsonファイルは、手動で作成してもよいし、npm initコマンドを使用して自動的に生成してもよい.npmのinitコマンドの後、エンジニアリングディレクトリフォルダのルートディレクトリにpackageが生成されます.jsonファイル、このJSONファイルフィールドの詳細:npmはプロジェクト全体をpackage(パッケージ)として定義し、このファイルはプロジェクトに必要なモジュールと構成情報を定義し、npm install後、プロジェクトはこのファイルの構成フィールドに基づいて必要なモジュールと構成に必要な実行と開発環境をダウンロードする.

{
  "name": "demo01",//    
  "version": "0.0.1",//     ，   .    .   
  "author": "wan",//
  "description": "The first react-native demo",//
  "keywords": ["react-native","javascript"],//

  "repository": {
    "type": "git",
    "url": "https://path/to/url"
  },
  "license":"MIT",
  "engines": {"node": "0.10.x"},
  "bugs":{"url":"http://path/to/bug","email":"[email protected]"},
  "contributors":[{"name":"  ","email":"[email protected]"}],
  "private": true,//
  "scripts": {//
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  //dependencies   devDependencies          。        ，                ，             。
  "dependencies": {//             
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.3",
    "react-native-deprecated-custom-components": "^0.1.0"
  },
  "devDependencies": {//            。
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "1.9.2",
    "jest": "20.0.4",
    "react-test-renderer": "16.0.0-alpha.6"
  },
  "jest": {//
    "preset": "react-native"
}

iOSが開発したWebViewはpostリクエストをロードし、パラメータを転送する方法

HTML5Drag&DropAPI