技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1.糸を取り付ける

1.Node.jsとnpmをインストールする

Node.js と npm をまだインストールしていない場合は、次からインストールできます。Node.js 公式ウェブサイト最新バージョンの Node.js をダウンロードしてインストールします。npm は Node.js とともにインストールされます。

2. npmを使用してYarnをインストールする

コマンド プロンプトまたは PowerShell を開き、次のコマンドを実行して Yarn をグローバルにインストールします。

npm install -g yarn
1

3. インストールの確認

インストールが完了したら、次のコマンドを実行して、Yarn が正常にインストールされたかどうかを確認します。

yarn --version
1

2. 糸の設定

1. プロジェクトの初期化

コマンド プロンプトまたは PowerShell でプロジェクト ディレクトリに移動し、次のコマンドを実行して新しい Yarn プロジェクトを初期化します。

yarn init
1

完了したら、プロンプトに従ってプロジェクトの関連情報を入力します。package.json書類。

2. 依存関係を追加する

たとえば、次のように追加しますreactそしてreact-dom頼る：

yarn add react react-dom
1

3. すべての依存関係をインストールします

すでにある場合package.jsonファイルを編集し、次のコマンドを実行してすべての依存関係をインストールします。

yarn install
1

3. VSCode で Yarn を使用する

1.VSCodeを開く

コマンド プロンプトまたは PowerShell でプロジェクト ディレクトリに移動し、次のコマンドを実行して VSCode を開きます。

code .
1

2. Yarn コマンドを実行する

VSCode の統合ターミナルで Yarn コマンドを実行できます。たとえば、新しい依存関係をインストールするには:

yarn add <package-name>
1

3. 構成タスク

Yarn コマンドを実行するように VSCode でタスクを構成できます。を作成または編集する.vscode/tasks.jsonファイルに次の構成を追加します。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Yarn Install",
      "type": "shell",
      "command": "yarn install",
      "group": "build",
      "problemMatcher": [],
      "detail": "安装项目所有依赖"
    },
    {
      "label": "Yarn Add",
      "type": "shell",
      "command": "yarn add",
      "args": [
        "${input:packageName}"
      ],
      "group": "build",
      "problemMatcher": [],
      "detail": "添加新的项目依赖"
    }
  ],
  "inputs": [
    {
      "id": "packageName",
      "type": "promptString",
      "description": "请输入要添加的依赖包名"
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

この設定ファイルでは、次のキーを押してこれを実行できます。Ctrl+Shift+B設定されたタスクを実行するためのショートカット キー。

4. デバッグおよびその他の構成

1. デバッグ構成を追加する

を作成または編集する.vscode/launch.jsonファイルに次の構成を追加します。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Program",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/app.js",
      "preLaunchTask": "Yarn Install",
      "outFiles": [
        "${workspaceFolder}/dist/**/*.js"
      ]
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

これはデバッグを開始する前に自動的に実行されますYarn Installタスク。

2. Yarn スクリプトを使用する

あなたはできるpackage.jsonファイルにスクリプトを定義し、VSCode の統合ターミナルで実行します。例えば：

{
  "scripts": {
    "start": "node app.js",
    "build": "webpack --config webpack.config.js"
  }
}
1
2
3
4
5
6

スクリプトを実行します。

yarn start
1

yarn build
1