기술나눔

npm을 사용하여 Windows 시스템에 Yarn을 설치 및 구성하고 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. npm을 사용하여 Yarn 설치

명령 프롬프트 또는 PowerShell을 열고 다음 명령을 실행하여 Yarn을 전역적으로 설치합니다.

npm install -g yarn
  • 1
3. 설치 확인

설치가 완료되면 다음 명령을 실행하여 Yarn이 성공적으로 설치되었는지 확인합니다.

yarn --version
  • 1

2. 원사 구성

1. 프로젝트 초기화

명령 프롬프트 또는 PowerShell에서 프로젝트 디렉터리로 이동하고 다음 명령을 실행하여 새 Yarn 프로젝트를 초기화합니다.

yarn init
  • 1

완료 후 프롬프트에 따라 프로젝트 관련 정보를 입력합니다.package.json문서.

2. 종속성 추가

예를 들어 다음을 추가하세요.react그리고react-dom의존하다:

yarn add react react-dom
  • 1
3. 모든 종속성을 설치합니다.

이미 하나 있다면package.json파일에서 다음 명령을 실행하여 모든 종속성을 설치합니다.

yarn install
  • 1

3. VSCode에서 Yarn 사용

1. VSCode 열기

명령 프롬프트 또는 PowerShell에서 프로젝트 디렉터리로 이동하고 다음 명령을 실행하여 VSCode를 엽니다.

code .
  • 1
2. Yarn 명령 실행

VSCode의 통합 터미널에서 Yarn 명령을 실행할 수 있습니다. 예를 들어, 새로운 종속성을 설치하려면 다음을 수행하십시오.

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