Teknologian jakaminen

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

1. Asenna lanka

1. Asenna Node.js ja npm

Jos et ole vielä asentanut Node.js:ää ja npm:ää, voit asentaa ne osoitteestaNode.js virallinen verkkosivustoLataa ja asenna Node.js:n uusin versio, npm asennetaan yhdessä Node.js:n kanssa.

2. Asenna lanka npm:llä

Avaa komentokehote tai PowerShell ja suorita seuraava komento asentaaksesi Yarn maailmanlaajuisesti:

npm install -g yarn
1

3. Tarkista asennus

Kun asennus on valmis, suorita seuraava komento tarkistaaksesi, onko lanka asennettu onnistuneesti:

yarn --version
1

2. Määritä lanka

1. Alusta projekti

Siirry projektihakemistoon komentokehotteessa tai PowerShellissä ja käynnistä uusi lankaprojekti suorittamalla seuraava komento:

yarn init
1

Täytä projektin tiedot ohjeiden mukaisestipackage.jsonasiakirja.

2. Lisää riippuvuuksia

Esimerkiksi lisääreactjareact-domluottaa:

yarn add react react-dom
1

3. Asenna kaikki riippuvuudet

jos sellainen on jo olemassapackage.jsontiedosto, suorita seuraava komento asentaaksesi kaikki riippuvuudet:

yarn install
1

3. Langan käyttäminen VSCodessa

1. Avaa VSCode

Siirry projektihakemistoosi komentokehotteessa tai PowerShellissä ja avaa VSCode suorittamalla seuraava komento:

code .
1

2. Suorita Lanka-komento

Voit suorittaa Yarn-komentoja VSCoden integroidussa päätteessä. Esimerkiksi uusien riippuvuuksien asentaminen:

yarn add <package-name>
1

3. Konfigurointitehtävät

Voit määrittää tehtävät VSCodessa suorittamaan Yarn-komentoja.Luo tai muokkaa.vscode/tasks.jsontiedosto, lisää seuraavat asetukset:

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

Tässä asetustiedostossa voit tehdä tämän painamallaCtrl+Shift+BPikanäppäimet määritettyjen tehtävien suorittamiseen.

4. Vianetsintä ja muut kokoonpanot

1. Lisää virheenkorjausasetukset

Luo tai muokkaa.vscode/launch.jsontiedosto, lisää seuraavat asetukset:

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

Tämä suoritetaan automaattisesti ennen virheenkorjauksen aloittamistaYarn InstallTehtävä.

2. Käytä lankaskriptejä

sinä pystytpackage.json Määritä skripti tiedostossa ja suorita se VSCoden integroidussa terminaalissa. Esimerkiksi:

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

Suorita skripti:

yarn start
1

yarn build
1