NPM and ES Modules

Question 1

What is NPM?

Answer 1

Node Package Manager e мениджър на JS пакети, които са публикувани от различни програмисти в общността.
Пакетите може да са единични файлове, JS библиотеки, или по-сложни колекции от библиотеки, цели JS frameworks.
Те решават различни проблеми и могат да се ползват от различни програмисти.

Question 2

What are the benefits of using it?

Answer 2

NPM пакетите се ползват, защото:

1. се пести време - не е нужно да се написват отначало фунционалности, които вече са написани от друг програмист
2. намаляваме вероятността от грешки, като преизползваме даден код
3. осигуряваме си надеждност, като интегрираме пакет, който се използва от други разработчици, които гарантират, че кода е тестван за edge cases и ни позволява да се концентрираме върху нашата логика

Предимства на NPM:

1. пакетите са open source и ние можем да разглеждаме кога и да се запознаем как работи
2. повечето пакети са тествани и доказано са с работещ код
3. повечето пакети се update - ват регулярно и всякакви грешки по кода се оправят и кода се подобрява

Question 3

What is Node.js?

Answer 3

Node.js е сървърно приложение, създаващо среда за изпълнение на JS код, т.е. run time environment.
Node.js прави възможно изпълнението на JS код, директно на сървъра, когато обикновено JS се изпълнява в browser-а.
За да ползваме NPM трябва да имаме инсталиран Node.js.

Или:

Node.js is an open source server environment
Node.js is free
Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
Node.js uses JavaScript on the server

Question 4

What is the package.json file?

Answer 4

Когато сваляме пакет с npm, този пакет се сваля в папка node_modules в нашия проект.
NPM знае версиите на всички пакети, които използваме в проекта и ги запазва в специален файл - Package.json

package-lock.json - в него подробно се описват всички пакети, както и всички пакети на които зависят тези пакети, заедно с версиите на всички

Question 5

How can create a package.json file?

Answer 5

To create a package.json file run the following comman in the bash terminal whithin the project’s folder:

npm init -y

This will create a package.json file with a template structure and default values:

• description: кратко описание на проекта, модула
• main: стартовия файл на проекта
• scripts: обект от скриптове/предефинирани команди (например за стартиране на файлове), които се ползват в проекта
• keywords: ключови думи, които описват пакета. Те са полезни когато търсим пакета в интернет или регистрите на npm
• dependancies: описват се всички пакети, необходими за проекта да работи
• dev-dependancies: описват се пакетите, които помагат (на програмистите при писане на самия пакет

Question 6

What is a NPM project?

Answer 6

NPM е такъв, в който имаме package.json файл, в който се описват пакетите ползвани с проекта.

Question 7

How to determine the version of an installed package?

Answer 7

Execute the following command in bash terminal:

       - node -v 
       - npm -v
       - package name -v

Question 8

How can install a npm package?

Answer 8

Execute the following command in the bash terminal within the npm project’s folder:

- npm install [name_of_package] -D - D means saving the dependency in the dev0dependancies array in the package.json file.

This will install the package in the current npm project.

Question 9

Do I need to have node_modules when I use npm project?

Answer 9

No, you need to havejust a package.json file. Той съдържа цялата информация за всички пакети, които се ползват в пакета. Затова не е необходимо да качваме/изпращаме тази папка с проекта.

Като си копираме/сваляме проекта е необходимо само да изпълним:

npm install

Така всички dependencies from pachage.json ще бъдат инсталирани в node_modules папката.

Question 10

How can install a npm packege globally?

Answer 10

Open the cmd/bash terminal anywhere in the system.
Execute the following command:

• npm install [package_name] -g
• g comes from global

Example:
npm install lodash -g

Question 11

How can setup and run a custom script in npm?

Answer 11

In package.json > scripts type the custom command:

“scripts” {
“start”: “node main.js”
},

Има предефинирани скриптове/команди за start and end. Ако използваме тези предефинирани команди/думи - не е необходимо да използваме думата run при пускане на скрипта.

Ако обаче ползваме различни думи, трябва да ползваме run:

"scripts" {
 "log": "node log.js" },

npm run log

Question 12

What are ES Modules? Explain what ES Modules are and what problems they solve.

Answer 12

Когато NPM и Node.js са били създадени JavaScript не е имала собствена модулна система. Браузърите са работели по различен начин, а Node.js е работел с CommonJS модулна система.

ES6 предоставя като обща модулна система ES Modules. Браузърите започват да предоставят поддръжка за нея, също и Node.js от версия 14.

ЕS Modules става универсална модулна система за JavaScript ecosystem.

Question 13

What is a npm module?

Answer 13

Модул - това е JS файл, който декларира и експортва една или повече стойности - функции или променливи, използвайки ‘export’.

Question 14

What is important to know about the node modules?

Answer 14

1. Те се инициализират веднъж и след това Node.js и браузъра ги кешират
2. Ако експорта е референтен тип, то реално импортваме референцията към референтната стойност/обект
3. Скоупа на декларираните в даден модул променливи и функции е самия модул. Модулите ни позволяват скриване на данни, т.е скриваме данни, които не сме експортнали
4. Модулите могат да импортват други модули, които да използват в кода си

Question 15

How can I use the ES Modules system?

Answer 15

You need to type in the package.json file the following (no matter where in the file on the first level):

“types”: “modules”,

Question 16

How can I create an npm module?

Answer 16

Можем да експортваме стойности от файла ни една по една с думата “export”:

export const defaultMsg = ‘Default message’

export function log(msg) {
console.log(msg);
}

Това ще генерира обект с имената на всички експортнати променливи и функции.

export {
defaultMsg,
log,
}

Question 17

How can I import an npm module?

Answer 17

• За да импортна само определени функционалности/пропертита он модула, мога да ползвам module/object destructuring:

             import { defaultMsg, log } from 'logger.js'

• Ако искам да импортна цялата функционалност от модула и да го именувам:

             import * as logger from './logger.js'

Сега всяка функционалност от Logger.js може да бъде достъпена през logger.

• Импортването на модул само по име - ще импортне само default export:

                 import log from 'path_to_module.js'

През log можем да достъпим всичко от default export.

Question 18

What is a default export?

Answer 18

Един модул може да има 0 или 1 default export и/ или много именувани exports.

export default function (msg) {
console.log(msg);
}

export function named () {
console.log(‘named’)
}

А може направим default export на обект от фунционалности:

export default {
   defaultMsg,
   log,
   named
}

Импортването на модул само по име - ще импортне само default export:

import log from ‘path_to_module.js’

През log можем да достъпим всичко от default export.

Question 19

What is a “tree shaking”?

Answer 19

Tree shaking - това означава да използваме само тези функционалности от модула, които ни трябват.
Да импортнем и кешираме само кода, необходим за нас. Това е и основното предимство на ES Modules пред CommonJS.