Utilice npm para instalar y configurar Yarn en sistemas Windows y

Utilice npm para instalar y configurar Yarn en sistemas Windows y utilizarlo en VSCode

2024-07-12

1. Instalar hilo

1. Instale Node.js y npm

Si aún no ha instalado Node.js y npm, puede instalarlo desdeSitio web oficial de Node.jsDescargue e instale la última versión de Node.js; npm se instalará junto con Node.js.

2. Instale Yarn usando npm

Abra un símbolo del sistema o PowerShell y ejecute el siguiente comando para instalar Yarn globalmente:

npm install -g yarn
1

3. Verificar la instalación

Una vez completada la instalación, ejecute el siguiente comando para verificar si Yarn se instaló correctamente:

yarn --version
1

2. Configurar hilo

1. Inicializar proyecto

Navegue hasta el directorio de su proyecto en un símbolo del sistema o PowerShell y ejecute el siguiente comando para inicializar un nuevo proyecto de Yarn:

yarn init
1

Complete la información relevante del proyecto de acuerdo con las indicaciones. Una vez finalizado, a.package.jsondocumento.

2. Agregar dependencias

Por ejemplo, agreguereactyreact-domconfiar:

yarn add react react-dom
1

3. Instale todas las dependencias.

si ya hay unopackage.jsonarchivo, ejecute el siguiente comando para instalar todas las dependencias:

yarn install
1

3. Usando hilo en VSCode

1. Abra VSCode

Navegue al directorio de su proyecto en el símbolo del sistema o PowerShell y ejecute el siguiente comando para abrir VSCode:

code .
1

2. Ejecute el comando Yarn

Puede ejecutar comandos de Yarn en la terminal integrada de VSCode. Por ejemplo, para instalar nuevas dependencias:

yarn add <package-name>
1

3. Tareas de configuración

Puede configurar tareas en VSCode para ejecutar comandos de Yarn.Crear o editar el.vscode/tasks.jsonarchivo, agregue la siguiente configuración:

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

En este archivo de configuración, puede hacer esto presionandoCtrl+Shift+BTeclas de acceso directo para ejecutar tareas configuradas.

4. Depuración y otras configuraciones

1. Agregar configuración de depuración

Crear o editar el.vscode/launch.jsonarchivo, agregue la siguiente configuración:

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

Esto se ejecutará automáticamente antes de comenzar la depuración.Yarn InstallTarea.

2. Utilice scripts de hilo

puedepackage.json Defina el script en el archivo y ejecútelo en la terminal integrada de VSCode. Por ejemplo:

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

Ejecute el script:

yarn start
1

yarn build
1

Compartir tecnología