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

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

2024-07-12

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

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