Skip to content
Kursen webtec

Skapa ett npm projekt

När man jobbar i projekt som har att göra med programmeringsspråket javascript så kan man använda node och npm som ett sätt att hantera projektet och installera verktyg och extra kodmoduler och hjälpverktyg vid behov. För att det skall fungera så behöver man initiera repot som ett npm projekt via kommandot npm init. Då skapas en fil package.json som innehåller inställningar för projektet och eventuella beroenden (dependencies). Om man installerar någon extra modul via npm install så kommer det också att skapas en fil package-lock.json som innehåller exakta versioner på de moduler som installerats och tillåter att man installerar exakt samma versioner vid nästa tillfälle. Dessa filer kan vara en del av ditt repo. När man installerar moduler så sparas de i katalogen node_modules, men den katalogen skall inte vara en del av repot och därför har vi placerat den i .gitignore. Den katalogen kan alltid återskapas utifrån filerna package*.json via kommandot npm install eller den kortare varianten av samma kommando npm i.

Initiera som npm projekt

Vi börjar med kommandot npm init för att initiera projektet.

Initiera projektet med npm init.
# Just init the project, without answering any questions
npm init -y

Det kan se ut så här om du gör detta i vscode och terminalen.

Image description
Bild: Filen package.json är skapad i ditt repo.

Lägg in ditt eget namn som author

Om du tittar i filen package.json så ser du ett fält som heter "author". Gå in i den filen och redigera genom att lägga till ditt eget namn. Du kan se nedan vilkan rad det gäller.

package.json
{
  "name": "webtec-abcd25",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/bth-webtec/webtec-abcd25.git"
  },
  "keywords": [],
  "author": "",
  "author": "Mikael Roos",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/bth-webtec/webtec-abcd25/issues"
  },
  "homepage": "https://github.com/bth-webtec/webtec-abcd25#readme"
}

Spara ändringarna när du är klar.

Använd “type”: “module” för moduler

När man jobbar med javascript kan man dela upp koden i moduler och det finns ett par olika modulsystem. Vi jobbar normalt med det modulsystem som använder import/export för ECMAScript moduler vilket också kallas ESM. Vi vill därför specificera att vårt projekt använder sig av ESM moduler och då behöver vi konfigurera det i filen pacakge.json genom att lägga till en rad i den filen.

package.json
{
  "name": "webtec-abcd25",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/bth-webtec/webtec-abcd25.git"
  },
  "keywords": [],
  "author": "Mikael Roos",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/bth-webtec/webtec-abcd25/issues"
  },
  "homepage": "https://github.com/bth-webtec/webtec-abcd25#readme"
}

Glöm inte att spara filen.

Lägg till filen i ditt repo och pusha

Avsluta med att lägga till filen package.json som en del av ditt repo och pusha den. Dubbelkolla att den finns på GitHub innan du är helt klar.