フロントエンド開発環境の展開に関する問題 (上級プログラマーに必要)

ここに画像の説明を挿入

多くの開発者が新しい会社に入社し、会社から新しいコンピューターが支給され、環境のインストールについて混乱しています。今日は、会社のコンピューターを復元する方法、入手方法、必要なさまざまな環境をインストールする方法を説明します。

1. ノードのインストール

公式サイトのダウンロードアドレス:

http://nodejs.cn/download/

必要に応じて、対応するバージョンをダウンロードしてください。私は Windows システムの 64 ビット バージョンをダウンロードしました。

詳細については、リンクを参照してください:ノードはプロセスに従います

1.nodejsとは何ですか?

スクリプト言語を実行するにはパーサーが必要です。JavaScript はスクリプト言語であり、html に記述された js 言語など、さまざまな場所にさまざまなパーサーがあり、ブラウザーがそのパーサーの役割を果たします。独立して実行する必要がある JS の場合、nodejs はパーサーです。
簡単に言えば、node.js はサーバー上で実行されているJavaScript
公式 Web サイトのアドレスです: http://nodejs.cn/

2. ノードの概念(3大概念)

Node.jsChrome V8 エンジンをベースとした JavaScript 実行環境です。

Node.jsイベント駆動型のノンブロッキング I/O モデルが使用されます。

Nodeサーバー上でJavaScriptを実行できる開発プラットフォームです。

イベント駆動型: タスクの実行、パブリッシャー、サブスクライバー、イベント駆動型 (発行時) ノンブロッキング: 特定のタスクの実行中に、他のタスクも実行可能 ブロッキング: 特定のタスクを実行し、タスクが完了していない場合は他のタスクも
実行待機する必要があります I/O: 入力/出力 (データベース操作、ファイル システム操作など) ノンブロッキング I/O モデル:
Node.js を使用してデータベース操作、ファイル システム操作などを実装する場合、非同期操作は非同期操作の核心である従来の実装はコールバック関数です

3. ノードのインストール手順

Node.js 公式インストールパッケージとソースコードのダウンロードアドレス: https://nodejs.org/en/download/

設置環境:Windows7 x64

インストール手順:

ステップ 1: ダウンロードしたインストール パッケージ「node-v12.13.0-x64.msi」をダブルクリックして、以下に示すようなようこそインターフェイスを表示します。

ここに画像の説明を挿入
ステップ 2: ダウンロードしたファイルをダブルクリックするとnode-v12.13.0-x64.msi、次のインターフェイスがポップアップ表示され、[次へ] をクリックします。
ここに画像の説明を挿入
ステップ 3: 「I accept the terms in the License Agreement」をチェックして使用許諾契約に同意し、[次へ] をクリックすると、次のインターフェイスが表示されます:
ここに画像の説明を挿入
ステップ 4: ノードのデフォルトのインストール パス.js は " ですC:\Program Files\nodejs\”。[次へ] をクリックします。
ここに画像の説明を挿入
ステップ 6: 正しいことを確認した後、クリックしNextてインストールを開始します。

ここに画像の説明を挿入
ステップ 7: クリックしInstallてインストールを開始します:
ここに画像の説明を挿入
ステップ 8: インストール進行状況ページ。30 分ほど待つとインストール完了インターフェイスに自動的に移動します:
ここに画像の説明を挿入
ステップ 9: 30 分後にインストールが完了します。Finishクリックするだけです:
ここに画像の説明を挿入
ステップ 10:ノードが正常にインストールされているかどうかを確認します:
DOSウィンドウバージョンを入力node -vまたはnode --version確認しますnode

2、cnpm

3、糸

1. 糸の紹介:

Yarn は Facebook がリリースした npm に代わるパッケージ管理ツールです。

2. 糸の特徴

  1. 超早い。
  2. Yarn はダウンロードされたすべてのパッケージをキャッシュするため、再度使用するときに再度ダウンロードする必要はありません。また、並列ダウンロードを利用してリソースの使用率を最大化するため、インストールが高速化されます。
  3. 超安全。
  4. コードを実行する前に、Yarn はアルゴリズムを通じて各インストール パッケージの整合性を検証します。超信頼できる。
  5. 詳細かつ簡潔なロック ファイル形式と明示的なインストール アルゴリズムを使用して、Yarn はさまざまなシステムでの無差別な作業を保証できます。

3.糸の取り付け:

ウィンドウズシステム

npm install -g yarn    或者 cnpm install -g yarn 

マック/リナックスシステム

sudo npm install -g yarn    或者sudo cnpm install -g yarn 

述べる:

Mac コンピュータでは、プロセス中にファイル ディレクトリを作成する必要があるため、管理者権限が必要です。管理者以外にはディレクトリを作成する権限がありません。

インストールが完了したら、次のコマンドを入力して、インストールが成功したかどうかを確認します。

yarn -v

4. 糸の一般的なコマンド:

安装包: 

yarn install //安装package.json里所有包,并将包及它的所有依赖项保存进yarn.lock
yarn install --flat //安装一个包的单一版本
yarn install --force //强制重新下载所有包
yarn install --production //只安装dependencies里的包
yarn install --no-lockfile //不读取或生成yarn.lock
yarn install --pure-lockfile //不生成yarn.lock 添加包(会更新package.json和yarn.lock):

yarn add [package] // 在当前的项目中添加一个依赖包,会自动更新到package.json和yarn.lock文件中
yarn add [package]@[version] // 安装指定版本,这里指的是主要版本,如果需要精确到小版本,使用-E参数
yarn add [package]@[tag] // 安装某个tag(比如beta,next或者latest)
//不指定依赖类型默认安装到dependencies里,你也可以指定依赖类型:

yarn add --dev/-D // 加到 devDependencies
yarn add --peer/-P // 加到 peerDependencies
yarn add --optional/-O // 加到 optionalDependencies
//默认安装包的主要版本里的最新版本,下面两个命令可以指定版本:

yarn add --exact/-E // 安装包的精确版本。例如yarn add [email protected]会接受1.9.1版,但是yarn add [email protected] --exact只会接受1.2.3版
yarn add --tilde/-T // 安装包的次要版本里的最新版。例如yarn add [email protected] --tilde会接受1.2.9,但不接受1.3.0

发布包

yarn publish  //移除一个包 
yarn remove <packageName>://移除一个包,会自动更新package.json和yarn.lock

更新一个依赖 

yarn upgrade //用于更新包到基于规范范围的最新版本

运行脚本 

yarn run // 用来执行在 package.json 中 scripts 属性下定义的脚本

显示某个包的信息 

yarn info <packageName>  // 可以用来查看某个模块的最新版本信息

缓存 

yarn cache 
yarn cache list // 列出已缓存的每个包 
yarn cache dir // 返回 全局缓存位置 
yarn cache clean // 清除缓存

安装yarn 
npm install -g yarn
安装成功后,查看版本号: 
yarn --version
创建文件夹 yarn 
md yarn
进入yarn文件夹 
cd yarn
初始化项目 
yarn init // 同npm init,执行输入信息后,会生成package.json文件
yarn的配置项: 
yarn config list // 显示所有配置项
yarn config get <key> //显示某配置项
yarn config delete <key> //删除某配置项
yarn config set <key> <value> [-g|--global] //设置配置项

4、npm 糸差分yarn.lockファイル

比如说你的项目中三个模块依赖有依赖关系,@1.2.1代表这个模块的版本。在你安装A的时候需要安装依赖C和D,很多依赖不会指定版本号,默认会安装最新的版本,这样就会出现问题:比如今天安装模块的时候C和D是某一个版本,而当以后C、D更新的时候,再次安装模块就会安装C和D的最新版本,如果新的版本无法兼容你的项目,你的程序可能就会出BUG,甚至无法运行。这就是npm的弊端,而yarn为了解决这个问题推出了yarn.lock的机制,这就是项目中的yarn.lock文件。注意:这个文件不要手动修改它,当你使用一些操作如yarn add时,yarn会自动更新yarn.lock

5.ミラーソースの切り替え[nrm]

npmのオリジナルソースは海外にあるため、ダウンロード速度が比較的遅いため、国内のミラーソースに切り替えるのが最善です。ここでは淘宝網のミラーソースを選択します。

1.nrmのインストールを押します

まずはnpmソースを管理できるnrmをインストールしましょう

npm install -g nrm --registry https://registry.npmmirror.com/

インストールnrm後、次のコマンドを使用して現在利用可能なソースを表示できます。

nrm ls

実行結果:
ここに画像の説明を挿入
2.npmのミラー元を設定する

1. npm の現在のミラーソースを表示します。

npm config get registry

ここに画像の説明を挿入
2.淘宝網ミラーソースを使用するようにnpmを設定します

npm config set registry https://registry.npmmirror.com/

ここでの https://registry.npmmirror.com/ タオバオ ミラー ソース アドレスは、
上記の nrm ls コマンドから taobao の背後にあるアドレスをコピーして現在利用可能なソースを表示することによって取得されます。現在利用可能なソースから他のミラー ソースを切り替えるには、次のようにします。あなた自身

ここに画像の説明を挿入
ここに画像の説明を挿入
粘り続ける限り、排除されない

おすすめ

転載: blog.csdn.net/weixin_52703987/article/details/131193724
おすすめ