Berbagi teknologi

Gunakan npm untuk menginstal dan mengkonfigurasi Yarn pada sistem Windows dan menggunakannya di VSCode

2024-07-12

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

1. Pasang Benang

1. Instal Node.js dan npm

Jika Anda belum menginstal Node.js dan npm, Anda dapat menginstalnya dariSitus web resmi Node.jsDownload dan instal Node.js versi terbaru, npm akan diinstal bersama dengan Node.js.

2. Instal Benang menggunakan npm

Buka prompt perintah atau PowerShell dan jalankan perintah berikut untuk menginstal Yarn secara global:

npm install -g yarn
  • 1
3. Verifikasi instalasi

Setelah instalasi selesai, jalankan perintah berikut untuk memverifikasi apakah Yarn berhasil diinstal:

yarn --version
  • 1

2. Konfigurasikan Benang

1. Inisialisasi proyek

Navigasikan ke direktori proyek Anda di prompt perintah atau PowerShell dan jalankan perintah berikut untuk menginisialisasi proyek Yarn baru:

yarn init
  • 1

Isi informasi yang relevan tentang proyek sesuai petunjuknya. Setelah selesai, apackage.jsondokumen.

2. Tambahkan dependensi

Misalnya, tambahkanreactDanreact-dommengandalkan:

yarn add react react-dom
  • 1
3. Instal semua dependensi

jika sudah adapackage.jsonfile, jalankan perintah berikut untuk menginstal semua dependensi:

yarn install
  • 1

3. Menggunakan Benang di VSCode

1. Buka VSCode

Navigasikan ke direktori proyek Anda di Command Prompt atau PowerShell dan jalankan perintah berikut untuk membuka VSCode:

code .
  • 1
2. Jalankan perintah Benang

Anda dapat menjalankan perintah Yarn di terminal terintegrasi VSCode. Misalnya, untuk menginstal dependensi baru:

yarn add <package-name>
  • 1
3. Tugas konfigurasi

Anda dapat mengonfigurasi tugas di VSCode untuk menjalankan perintah Yarn.Buat atau edit.vscode/tasks.jsonfile, tambahkan konfigurasi berikut:

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

Dalam file konfigurasi ini, Anda dapat melakukannya dengan menekanCtrl+Shift+BTombol pintasan untuk menjalankan tugas yang dikonfigurasi.

4. Debugging dan konfigurasi lainnya

1. Tambahkan konfigurasi debugging

Buat atau edit.vscode/launch.jsonfile, tambahkan konfigurasi berikut:

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

Ini akan berjalan secara otomatis sebelum memulai debuggingYarn InstallTugas.

2. Gunakan skrip Benang

kamu bisapackage.json Tentukan skrip dalam file dan jalankan di terminal terintegrasi VSCode. Misalnya:

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

Jalankan skrip:

yarn start
  • 1
yarn build
  • 1