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
相关推荐
打小就很皮...9 天前
npm、pnpm、yarn使用以及区别
前端·npm·yarn
灿灿1213814 天前
npm、pnpm、yarn 各自优劣深度剖析
前端·javascript·npm·pnpm·yarn
雨笋情缘17 天前
【2025-05-22】centos 离线安装兼容node和npm版本的pm2 和 yarn
linux·npm·centos·node·yarn·pm2
鲁尼的小宝贝18 天前
基于Flink的数据中台管理平台
java·大数据·clickhouse·flink·yarn
big tail21 天前
项目依赖版本修改
npm·pnpm·react·yarn·依赖·package.json
IvanCodes1 个月前
七、Hadoop 历史追踪、数据安全阀与 MapReduce初体验
大数据·hadoop·hdfs·mapreduce·yarn
ejinxian1 个月前
npm,yarn,pnpm,cnpm,nvm,npx包管理器常用命令
前端·npm·pnpm·yarn·nvm·npx
炒空心菜菜1 个月前
Spark 配置 YARN 模式
大数据·spark·yarn
只因只因爆2 个月前
yarn的定义
hadoop·yarn
IT成长日记2 个月前
【HDFS入门】HDFS与Hadoop生态的深度集成:与YARN、MapReduce和Hive的协同工作原理
hadoop·hdfs·mapreduce·yarn