NPM Dependencies

Types

  • dependencies
  • devDependencies
  • peerDependencies

What's the goal?

Target Enviroment

Purpose

Module for Devs

Product

Module for Practices

"dependencies"

  • What are they?

  • How do you get them?

npm install ____
  • When do you use them?

"devDependencies"

  • What are they?

  • How do you get them?

npm install -D ____
  • When do you use them?

"peerDependencies"

Purpose

Module for Devs

Product

Module for Practices

How you get them?

By manually editing package.json

  "peerDependencies": {
    "react": "*",
    "react-dom": "*"
  },

Tip: Also add to devDepdendencies

  "peerDependencies": {
    "react": "*",
    "react-dom": "*"
  },
  "devDependencies": {
    "react": "16.6.3",
    "react-dom": "16.6.3"
  } 

Target Enviroment

Purpose

The Product

Module for Devs

Building / Running Seperation

  • tslint : Linting (build)
  • axios : HTTP queries (run) 
  • typescript : .ts -> .js (build)
  • react : (run)

Target Enviroment

Purpose

The Product

Module for Devs

It doesn't matter where you install stuff 

 

 

Instead ask yourself what do I need to install?

Purpose

The Product

Module for Devs

fetch

axios

Purpose

The Product

awesome
(Module for Devs)

mobx
(different version)

 mobx

Purpose

The Product

Module for Devs

Target Enviroment

Target Enviroment

Target Enviroment

peerDepdendency

awesome
(Module for Devs)

 mobx

peerDependency

Building (dev)
/ Running (peer)
Seperation

  • tslint : Linting (build)
  • axios : HTTP queries (run) 
  • typescript : .ts -> .js (build)
  • react : (run)

Target Enviroment

Purpose

The Product

Module for Devs

Building / Running
Seperation

  • tslint : Linting (💩)
  • axios : HTTP queries (💩) 
  • typescript : .ts -> .js (💩)
  • react : (💩)

Bring your own

The Product

BYO

Do you need to care about the universe?

The Product

BYO

webpack

Wepack's Target Enviroment

Building (dev) / Running (dep)
Seperation

  • tslint : Linting (dev)
  • axios : HTTP queries (dep) 
  • typescript : .ts -> .js (dev)
  • react : (dep)

NEXT

  • Jump to demos
Made with Slides.com