기술나눔

한어Русский язык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