Windows系统上使用npm来安装和配置Yarn,在VSCode中使用

一、安装Yarn

1. 安装Node.js和npm

如果还没有安装Node.js和npm,可以从Node.js官方网站下载并安装最新版本的Node.js,npm会随Node.js一起安装。

2. 使用npm安装Yarn

打开命令提示符或PowerShell,运行以下命令来全局安装Yarn:

bash 复制代码
npm install -g yarn
3. 验证安装

安装完成后,运行以下命令来验证Yarn是否安装成功:

bash 复制代码
yarn --version

二、配置Yarn

1. 初始化项目

在命令提示符或PowerShell中导航到你的项目目录,运行以下命令来初始化一个新的Yarn项目:

bash 复制代码
yarn init

根据提示填写项目的相关信息,完成后会生成一个package.json文件。

2. 添加依赖

例如,添加reactreact-dom依赖:

bash 复制代码
yarn add react react-dom
3. 安装所有依赖

如果已经有一个package.json文件,运行以下命令来安装所有依赖:

bash 复制代码
yarn install

三、在VSCode中使用Yarn

1. 打开VSCode

在命令提示符或PowerShell中导航到你的项目目录,运行以下命令来打开VSCode:

bash 复制代码
code .
2. 运行Yarn命令

你可以在VSCode的集成终端中运行Yarn命令。例如,安装新依赖:

bash 复制代码
yarn add <package-name>
3. 配置任务

你可以在VSCode中配置任务来运行Yarn命令。创建或编辑项目根目录下的.vscode/tasks.json文件,添加如下配置:

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": "请输入要添加的依赖包名"
    }
  ]
}

在这个配置文件中,你可以通过按下Ctrl+Shift+B快捷键来运行配置的任务。

四、调试与其他配置

1. 添加调试配置

创建或编辑项目根目录下的.vscode/launch.json文件,添加如下配置:

json 复制代码
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Program",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/app.js",
      "preLaunchTask": "Yarn Install",
      "outFiles": [
        "${workspaceFolder}/dist/**/*.js"
      ]
    }
  ]
}

这会在启动调试前自动运行Yarn Install任务。

2. 使用Yarn脚本

你可以在package.json文件中定义脚本,并在VSCode的集成终端中运行。例如:

json 复制代码
{
  "scripts": {
    "start": "node app.js",
    "build": "webpack --config webpack.config.js"
  }
}

运行脚本:

bash 复制代码
yarn start
bash 复制代码
yarn build
相关推荐
小葛呀12 天前
互联网大数据求职面试:从Zookeeper到Flink的技术探讨
大数据·redis·zookeeper·面试·flink·互联网·yarn
ZKf30FkG17 天前
前端包管理工具终极对决:npm vs Yarn vs pnpm vs Bun vs Deno
前端·npm·node.js·yarn
qiandeqiande22 天前
Yarn与NPM缓存存储目录迁移
npm·yarn
没事儿24 天前
升级老项目的包依赖
前端·npm·yarn
打小就很皮...1 个月前
npm、pnpm、yarn使用以及区别
前端·npm·yarn
灿灿121381 个月前
npm、pnpm、yarn 各自优劣深度剖析
前端·javascript·npm·pnpm·yarn
雨笋情缘1 个月前
【2025-05-22】centos 离线安装兼容node和npm版本的pm2 和 yarn
linux·npm·centos·node·yarn·pm2
鲁尼的小宝贝1 个月前
基于Flink的数据中台管理平台
java·大数据·clickhouse·flink·yarn
big tail2 个月前
项目依赖版本修改
npm·pnpm·react·yarn·依赖·package.json
IvanCodes2 个月前
七、Hadoop 历史追踪、数据安全阀与 MapReduce初体验
大数据·hadoop·hdfs·mapreduce·yarn