Technologieaustausch

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

1. Garn installieren

1. Installieren Sie Node.js und npm

Wenn Sie Node.js und npm noch nicht installiert haben, können Sie es von installierenOffizielle Website von Node.jsLaden Sie die neueste Version von Node.js herunter und installieren Sie sie. npm wird zusammen mit Node.js installiert.

2. Installieren Sie Yarn mit npm

Öffnen Sie eine Eingabeaufforderung oder PowerShell und führen Sie den folgenden Befehl aus, um Yarn global zu installieren:

npm install -g yarn
1

3. Überprüfen Sie die Installation

Führen Sie nach Abschluss der Installation den folgenden Befehl aus, um zu überprüfen, ob Yarn erfolgreich installiert wurde:

yarn --version
1

2. Garn konfigurieren

1. Projekt initialisieren

Navigieren Sie in einer Eingabeaufforderung oder PowerShell zu Ihrem Projektverzeichnis und führen Sie den folgenden Befehl aus, um ein neues Yarn-Projekt zu initialisieren:

yarn init
1

Geben Sie die relevanten Informationen des Projekts gemäß den Anweisungen ein. Nach Abschluss apackage.jsondokumentieren.

2. Abhängigkeiten hinzufügen

Fügen Sie zum Beispiel hinzureactUndreact-domverlassen:

yarn add react react-dom
1

3. Installieren Sie alle Abhängigkeiten

falls es schon eine gibtpackage.jsonFühren Sie in der Datei den folgenden Befehl aus, um alle Abhängigkeiten zu installieren:

yarn install
1

3. Verwenden von Yarn in VSCode

1. Öffnen Sie VSCode

Navigieren Sie in der Eingabeaufforderung oder PowerShell zu Ihrem Projektverzeichnis und führen Sie den folgenden Befehl aus, um VSCode zu öffnen:

code .
1

2. Führen Sie den Yarn-Befehl aus

Sie können Yarn-Befehle im integrierten Terminal von VSCode ausführen. Um beispielsweise neue Abhängigkeiten zu installieren:

yarn add <package-name>
1

3. Konfigurationsaufgaben

Sie können Aufgaben in VSCode konfigurieren, um Yarn-Befehle auszuführen.Erstellen oder bearbeiten Sie die.vscode/tasks.jsonFügen Sie in der Datei die folgende Konfiguration hinzu:

{
  "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

In dieser Konfigurationsdatei können Sie dies tun, indem Sie auf drückenCtrl+Shift+BTastenkombinationen zum Ausführen konfigurierter Aufgaben.

4. Debugging und andere Konfigurationen

1. Debugging-Konfiguration hinzufügen

Erstellen oder bearbeiten Sie die.vscode/launch.jsonFügen Sie in der Datei die folgende Konfiguration hinzu:

{
  "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

Dies wird automatisch ausgeführt, bevor mit dem Debuggen begonnen wirdYarn InstallAufgabe.

2. Verwenden Sie Yarn-Skripte

du kannstpackage.json Definieren Sie das Skript in der Datei und führen Sie es im integrierten Terminal von VSCode aus. Zum Beispiel:

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

Führen Sie das Skript aus:

yarn start
1

yarn build
1