Technology Sharing

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

1. Install Yarn

1. Install Node.js and npm

If you haven't installed Node.js and npm yet, you can install them fromNode.js official websiteDownload and install the latest version of Node.js. npm will be installed along with Node.js.

2. Install Yarn using npm

Open a command prompt or PowerShell and run the following command to install Yarn globally:

npm install -g yarn
1

3. Verify the installation

After the installation is complete, run the following command to verify that Yarn is installed successfully:

yarn --version
1

2. Configure Yarn

1. Initialize the project

Navigate to your project directory in the Command Prompt or PowerShell and run the following command to initialize a new Yarn project:

yarn init
1

Fill in the relevant information of the project according to the prompts, and apackage.jsondocument.

2. Add dependencies

For example, addreactandreact-domrely:

yarn add react react-dom
1

3. Install all dependencies

If you already have onepackage.jsonFile, run the following command to install all dependencies:

yarn install
1

3. Using Yarn in VSCode

1. Open VSCode

Navigate to your project directory in Command Prompt or PowerShell and run the following command to open VS Code:

code .
1

2. Run the Yarn command

You can run Yarn commands in VSCode's integrated terminal. For example, to install new dependencies:

yarn add <package-name>
1

3. Configuring tasks

You can configure tasks in VSCode to run Yarn commands. Create or edit the.vscode/tasks.jsonFile, add the following configuration:

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

In this configuration file, you can pressCtrl+Shift+BShortcut key to run the configured task.

4. Debugging and other configurations

1. Add debug configuration

Create or edit the project root directory.vscode/launch.jsonFile, add the following configuration:

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

This will be run automatically before starting debugging.Yarn InstallTask.

2. Use Yarn script

You canpackage.jsonDefine the script in a file and run it in the integrated terminal of VSCode. For example:

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

Run the script:

yarn start
1

yarn build
1