NPM CLI: The 5 essential commands for every developer

1. What? npm add and npm install fully equivalent

If you try to search for this instruction in the npmofficial npm add, you will find that this instruction does not seem to exist at all.

So what npm add vue@latest --savethe ?

In fact, npm addis one npm installof the aliases of , so when we npm addexecute , npmit is exactly the same as executing for npm install!

Next time, you can try npm install vue@latest --saveit 🤣

As you know, npm installthere is another common alias: npm i;

2. What? npm isntall, npm instal can also be executed?

You read that right, it’s not the above install, it's a bizarre spelling error;

So npm isntall, npm instalwhat is the effect of this wrong spelling instruction?

The answer is: exactly the same!npm install

Haha, didn’t expect it!

In fact, this is a new feature of the npm 8.xversion. Maybe a core contributor is a veteran like you and me who has entered wrong instructions all year round because the fingers can't keep up with the speed of the brain.

So in the 8.x, 9 aliases have been added on the basis of the previous npm install, addthey are:i

in, ins, inst, insta, instal, isnt, isnta, isntal, isntall

Mom, there are all kinds of spelling mistakes that I can think of and can’t think of. This contributor must be a classmate with a story.

3. Each script has a predecessor and a next one?

What are the build directives defined in the project you are currently developing?

Suppose, the build script is:

npm run build 

So do you know how to do some specific other operations before the execution of the npm run buildinstruction, or to perform some operations after the execution, what should be done?

The answer is to define the following two scripts:

"scripts": {
"prebuild": "",
"postbuild": ""

Even if you define a script called, it has hooks such as papapa"predecessor" prepapapaand "next"!postpapapa

Do you find that many components package.jsonlibraries have postinstallscripts in them?

That’s right, they are the scripts that are installexecuted after the execution.

4. Through npm link, can create some practical tool instructions

npm linkAs many people know, its most well-known uses are:

Create a soft link so that you npmcan Brely on the Aproject without publishing to the source.

But if package.jsonyou define a binproperty in your project and point it to an executable script file.

for example:

"bin": {
"i-love-u": "src/index.js"

Once you npm linkpublish, congratulations, you just need to type on the command line and i-love-uit will execute the script it points to.

Isn’t itcooool?

This will make you look more like a “geek”.

5. When you use dependencies, which file is imported?

Can you tell me when you write the following code in your code:

import { createStore } from 'vuex';
// or
const { createStore } = require('vuex');

Are the two statements importing the same file? What’s the difference?

Will it make any difference to the program?

Some students may be able to answer “the former is ESMgrammar, the latter is CommonJSgrammar." Then what?

Then, we need to understand a few knowledge points first:

  1. Since node 14.x, package.jsonthe exportsattribute, and when it exists, it has the highest priority.

"exports": "main.js"

"exports": {
"import": "es/index.js",
"require": "cjs/index.js"

2. When the exports attribute does not exist, but the moduleattribute exists, the build tools (eg webpack, rollup) will use the moduleattribute as ESMthe entry of.

Therefore, if the package.jsonfile contains:

name: "yy",
module: "lib/index.js",

In the webpack/rollupproject :

import xx from 'yy';

entry will be pointed tonode_modules/yy/lib/index.js

3. exportsIf moduleneither nor exists package.json, the mainattribute in becomes the only attribute for the specified entry.

Regarding the topic of “module entry”, a whole article can be expanded, so I won’t repeat it. Interested friends can read the Node.jsrelated :…

(Well, strictly speaking, this does not belong to npmthe knowledge point of,orz)




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to add ESlint, Prettier, and Husky (Git Hook) in React JS 2022

Chain React 2019 — The React Native Conference

If ain’t body stand

What’s new in Cordova 9.0, compared to Cordova 8.x

What’s new in Cordova 9.0, compared to Cordova 8.x

Meet Etsy’s 2019 Interns!

What is “Big O Notation” in Programming?

Real World Angular - Part 9: Unit Testing

React Native Component Libraries to Try in Your Next Build

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


More from Medium

JavaScript Arrays

What you don’t know about JavaScript | Part II

How to Get the First N Characters of a String in JavaScript

How to use the Array indexOf() method in Javascript