ES6 modules, webpack & npm

Question 1

What does npm stand for?

Answer 1

node package manager

Question 2

What does npm give you access to?

Answer 2

Gigantic repository of plugins, libraries and tools

Question 3

Few examples of how you can use npm

Answer 3

1. adapt pacakges of code for your apps
2. download standalone tools
3. share code with any npm user
4. run packages without downloading using npx
5. manage multiple versions of code and code dependencies

Question 4

What are npm unscoped packages? Syntax for installing it?

Answer 4

Packages, that are always public. It means they can be searched for, downloaded and installed by anyone

npm install <package></package>

Question 5

What is the requirement of installing scoped public packages? Syntax?

Answer 5

As long as the scope name is referenced, it can be downloaded by anyone.

npm install @scope/package-name

Question 6

What does package.json file do? (3)

Answer 6

1. Lists the packages your project depends on
2. Specifies versions of a package that your project can use
3. Makes your build reproducible, therefore it’s easier to share it with other

Question 7

What kind of fields package.json must contain?

Answer 7

Name and Version fields. Author is not mandatory

{
“name”: “my-awesome-package”,
“version”: “1.0.0”,
“author”: “Your Name email@example.com”
}

Question 8

Which command creates package.json?

Answer 8

npm init

more info: https://docs.npmjs.com/creating-a-package-json-file

Question 9

What are ‘devDependencies’ and ‘Dependencies’? Where are they located and how are they created?

Answer 9

They are two properties which are added to package.json when a package is installed as development (devDependency) or production dependency.

Question 10

When are devDependencies being used?

Answer 10

During the development stage, they are not needed on the production side. So it would be wiser to use –save-dev with those packages

Question 11

When do you add a dependency into the ‘dependencies’ property? Knowing that devDependency is also an option

Answer 11

When this dependency is used both in development and production phase. So it would be wise to use –save with those packages

Question 12

What is Webpack used for?

Answer 12

For bundling modules

Question 13

How many components does ES6 modules have? What are they?

Answer 13

2
import and export

Question 14

What is export declaration used to?

Answer 14

To export values from a JavaScript module

Question 15

In order to use “import” or “export” declaration in source file, what the file must be interpreted as?

Answer 15

The file must be interpreted as module

Question 16

How do you interpret the file as a module in HTML?

Answer 16

In the

 tag you must put type="module"

Question 17

What are the four forms of import declarations? With syntax.

Answer 17

1. Named import.
   Ex: import { export1, export2 } from “module-name”;
2. Default import.
   Ex: import defaultExport from “module-name”;
3. Namespace import.
   Ex: import * as name from “module-name”;
4. Side effect import.
   Ex: import “module-name”;

Question 18

If you want to export several functions which method should you use? Syntax?

Answer 18

Named export.

const functionOne = () => ‘ONE’;
const functionTwo = () => ‘TWO’;

export {
functionOne,
functionTwo
};

Question 19

What is package.json?

Answer 19

Package.json file is the heart of any Node project which holds various metadata relevant to it. Package.json file is used to give information to npm that allows it to identify the project as well as handle the project’s dependencies.

Question 20

Explain what the concepts “entry” and “output” mean as relates to webpack.

Answer 20

Usually files are put into “src” and “dist” folders. In “src” (source directory) there are files which are going to be bundled up by Webpack (when it runs it’s going through all the files, looking for “import”, then compiles all of the code we need to run our site into a single file inside of the dist folder).

Our entry file, then is the main application file that links (either directly or indirectly) to all of the other modules in our project. In this example, it is /src/index.js. The output file is the compiled version - dist/main.js

Question 21

When is export default used?

Answer 21

Only when there is one export to be made from a particular file