A: npm is the world's largest Software Registry. The registry contains over 800,000 code packages. Open-source developers use npm to share software.
npm is lots of things:
npmis the package manager for Node.js. It was created in 2009 as an open source project to help JavaScript developers easily share packaged modules of code.- The
npmRegistry is a public collection of packages of open-source code forNode.js, front-end web apps, mobile apps, robots, routers, and countless other needs of the JavaScript community. npmalternative isyarn
npm init
npm init -y can be used to skip the setup step, npm takes care of it and creates the package.json json file automatically , but without configurations.
npmis the command line client that allows developers to install and publish those packages.
A: Parcel and webpack are the bundlers used mostly for JavaScript or Typescript code that helps you to minify, clean, and make your code compact so that it becomes easier to send a request or receive the response from the server when it usually takes you to transfer multiple files without using any bundler for loading the page of your application. Both of these bundlers substantially reduce the time it takes for the transfer of data and files to the server from the application. Along with that both bundlers parcel and webpack remove the unnecessary comments, new lines, any kind of block delimiters, and white spaces while the functionality of the code remains unchanged.
Use of Parcel/Webpack:
Module bundlers are the way to organize and combine many files of JavaScript code into one file. A JavaScript bundler can be used when your project becomes too large for a single file or when you're working with libraries that have multiple dependencies.
- Install:
npm install -D parcel
-D is used for development and as a development dependency.
- Parcel Commands :
- For development build:
npx parcel <entry_point>- For production build :
npx parcel build <entry_point>
A: cache folder (or .parcel-cache in parcel v2) stores information about your project when parcel builds it, so that when it rebuilds, it doesn't have to re-parse and re-analyze everything from scratch. It's a key reason why parcel can be so fast in development mode.
A: npx stands for Node Package eXecute. It is simply an npm package runner. It allows developers to execute any Javascript Package available on the npm registry without even installing it. npx is installed automatically with npm version 5.2.
A: "dependencies" : Packages required by your application in production. "devDependencies" : Packages that are only needed for local development and testing.
A: Tree shaking, also known as dead code elimination, is the practice of removing unused code in your production build. It's important to ship as little code to your end-users as possible. By statically analyzing our source code, we can determine what's not being used and exclude it from our final bundle.
A: Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways: Retain application state which is lost during a full reload. Save valuable development time by only updating what's changed.
- Dev Build - parcel provides us develop build
- Local Server - parcel also provides us a local server, which can be used to see live changes in our application.
- HMR = Hot Module Replacement - exchanges, adds, or removes modules while an application is running, without a full reload
and some of more cool features of Parcel are:
- File Watching Algorithm - written in C++
- Caching - Faster Builds
- Image Optimization
- Minification
- Bundling
- Compress
- Consistent Hashing
- Code Splitting
- Differential Bundling - support older browsers
- Diagnostic
- Error Handling
- HTTPs
- Tree Shaking - remove unused code
- Different Build for dev and prod bundles
A: gitignore file tells Git which files to ignore when committing your project to the GitHub repository. gitignore is located in the root directory of your repo. / will ignore directories with the name.
In our code we shouldn't add the files, which we can re-generate in future e.g, node_modules, dist etc.
A: Both of these files have the same format, and perform similar functions in the root of a project. The difference is that package-lock. json cannot be published, and it will be ignored if found in any place other than the root project.
The package. json is used for more than dependencies - like defining project properties, description, author & license information, scripts, etc. The package-lock. json is solely used to lock dependencies to a specific version number.
A: It is a generated file and is not designed to be manually edited. Its purpose is to track the entire tree of dependencies (including dependencies of dependencies) and the exact version of each dependency. You should commit package-lock.json to your code repository
You should avoid updating the package.json manually since it could break the synchronization between package.json and package-lock. json.
A: The node_modules folder contains generated code. This is not code you've written and you should never make any updates to the files inside Node modules because there's a pretty good chance they'll get overwritten next time you install some modules.
It is better to not commit the node_modules folder, and instead add it to your .gitignore file.
Here are all the reasons why you shouldn't commit it: The node_modules folder has a massive size (up to Gigabytes). It is easy to recreate the node_modules folder via packages. json
A: The /dist stands for distributable. The /dist folder contains the minimized version of the source code. The code present in the /dist folder is actually the code which is used on production web applications.
Parcel's default directory for your output is named dist . The --dist-dir public tag defines the output folder for your production files and is named public to avoid confusion with the dist default directory.
A: Browserslist defines and shares the list of target browsers between various frontend build tools.