Condivisione della tecnologia

Utilizza npm per installare e configurare Yarn sui sistemi Windows e utilizzarlo in VSCode

2024-07-12

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

1. Installa il filato

1. Installa Node.js e npm

Se non hai ancora installato Node.js e npm, puoi installarlo daSito ufficiale di Node.jsScarica e installa l'ultima versione di Node.js, npm verrà installato insieme a Node.js.

2. Installa Yarn utilizzando npm

Apri un prompt dei comandi o PowerShell ed esegui il comando seguente per installare Yarn a livello globale:

npm install -g yarn
  • 1
3. Verificare l'installazione

Al termine dell'installazione, esegui il comando seguente per verificare se Yarn è stato installato correttamente:

yarn --version
  • 1

2. Configura Filato

1. Inizializza il progetto

Passa alla directory del progetto in un prompt dei comandi o in PowerShell ed esegui il comando seguente per inizializzare un nuovo progetto Yarn:

yarn init
  • 1

Compilare le informazioni rilevanti del progetto secondo le istruzioni Dopo il completamento, apackage.jsondocumento.

2. Aggiungi dipendenze

Ad esempio, aggiungireactEreact-domfare affidamento:

yarn add react react-dom
  • 1
3. Installa tutte le dipendenze

se ce n'è già unopackage.jsonfile, esegui il comando seguente per installare tutte le dipendenze:

yarn install
  • 1

3. Utilizzo del filato in VSCode

1. Apri VSCode

Passare alla directory del progetto nel prompt dei comandi o in PowerShell ed eseguire il comando seguente per aprire VSCode:

code .
  • 1
2. Eseguire il comando Filato

Puoi eseguire i comandi Yarn nel terminale integrato di VSCode. Ad esempio, per installare nuove dipendenze:

yarn add <package-name>
  • 1
3. Attività di configurazione

È possibile configurare le attività in VSCode per eseguire i comandi Yarn.Crea o modifica il.vscode/tasks.jsonfile, aggiungere la seguente configurazione:

{
  "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 questo file di configurazione, puoi farlo premendoCtrl+Shift+BTasti di scelta rapida per eseguire attività configurate.

4. Debug e altre configurazioni

1. Aggiungi la configurazione di debug

Crea o modifica il.vscode/launch.jsonfile, aggiungere la seguente configurazione:

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

Questo verrà eseguito automaticamente prima di iniziare il debugYarn InstallCompito.

2. Utilizzare gli script Yarn

puoipackage.json Definire lo script nel file ed eseguirlo nel terminale integrato di VSCode. Per esempio:

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

Esegui lo script:

yarn start
  • 1
yarn build
  • 1