Используйте npm для установки и настройки Yarn в системах Windows и

Используйте npm для установки и настройки Yarn в системах Windows и используйте его в VSCode.

2024-07-12

1. Установите пряжу

1. Установите Node.js и npm.

Если вы еще не установили Node.js и npm, вы можете установить их сОфициальный сайт Node.jsЗагрузите и установите последнюю версию Node.js, npm будет установлен вместе с Node.js.

2. Установите Yarn с помощью npm.

Откройте командную строку или PowerShell и выполните следующую команду, чтобы установить Yarn глобально:

npm install -g yarn
1

3. Проверьте установку

После завершения установки выполните следующую команду, чтобы проверить, успешно ли установлен Yarn:

yarn --version
1

2. Настройте пряжу

1. Инициализировать проект

Перейдите в каталог вашего проекта в командной строке или PowerShell и выполните следующую команду, чтобы инициализировать новый проект Yarn:

yarn init
1

Заполните соответствующую информацию о проекте в соответствии с подсказками. После завершения появится a.package.jsonдокумент.

2. Добавьте зависимости

Например, добавьтеreactиreact-domполагаться:

yarn add react react-dom
1

3. Установите все зависимости

если он уже естьpackage.jsonфайл, выполните следующую команду, чтобы установить все зависимости:

yarn install
1

3. Использование Yarn в VSCode

1. Откройте VSCode.

Перейдите в каталог вашего проекта в командной строке или PowerShell и выполните следующую команду, чтобы открыть VSCode:

code .
1

2. Запустите команду Yarn.

Вы можете запускать команды Yarn во встроенном терминале VSCode. Например, чтобы установить новые зависимости:

yarn add <package-name>
1

3. Задачи настройки

Вы можете настроить задачи в VSCode для запуска команд Yarn.Создайте или отредактируйте.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

Обмен технологиями