Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to use NPM", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use NPM" this article.

1. Initialization package

We can run the npm init command to initialize the package, but it asks for information about the package, author, and so on. There is another way to automatically generate our package.json using the npm init-y command.

Npm init-y

We can also use the npm config command to set some default initialization configurations, such as author details.

Npm config set init-author-name "Ankit Jain" npm config set init-author-email "ankitjain28may77@gmail.com"

Then run npm init-y to generate our package automatically:

{"name": "", "version": "1.0.0", "description": "," main ":" index.js "," scripts ": {" test ":" echo\ "Error: no test specified\" & exit 1 "}," keywords ": []," author ":" Ankit Jain "," license ":" ISC "}

We can also use npm config to configure our own javascript files to extend the functionality of npm init:

Npm config set init-module

two。 Install packages from different sources

NPM CLI also allows you to install javascript packages from other sources, such as Bit, tarball files, GitHub, Bitbucket, and gist.

# Install a component from Bit (set Bit as a scoped registry) npm config set @ bit:registry https://node.bit.dev npm I @ bit/username.collection.component # Install from tarball stored locally npm i. / local-tarball-package.tgz # Install tarball package from internet npm i https://abc/xyz/package.tar.gz # Install from github repo npm i githubuser/reponame # Install from bitbucket repo npm i bitbucket:bitbucketuser/reponame # Install from gist npm i gist:gistID

For example: install button components from Bit

Suppose I need a button component, and one of my teammates has released the button component to our component collection on Bit.

First, configure Bit as scope (Fan Weibao)

Npm config set @ bit:registry https://node.bit.dev

Then, I will go to my team's component set to look for buttons:

Find the button component, copy the installation command, and install using NPM

Npm I @ bit/the_a-team.imperfect-components.button

The name of my team: The A-Team. Our component set name: "Imperfect Components".

For example: install Icon components from npm enterprise private library

For example, I need to install an Icon component in the project, and one of my teammates has released the button component to the npm enterprise private library.

We can also use scope to associate with enterprise private libraries. This allows you to use modules in both npm public repositories and some other private repositories:

Npm config set @ xscope:registry https://xxx.com/npm/

Multi-source installation: user unaware

Every time you use a private library, you need to switch the npm image path. Using the hook of npm preinstall, add the script to be executed by preinstall in the package.json of the project, so that the partner can install it without awareness:

/ / before executing the npm install command, npm automatically executes the npm preinstall hook "scripts": {"preinstall": "node. / bin/preinstall.js"}

Configure. / bin/preinstall.js:

Const {exec} = require ('child_process'); exec (' npm config get registry', function (error, stdout, stderr) {if (! stdout.toString (). Match (/ registry\ .x\ .com /)) {exec ('npm config set @ xscope:registry https://xxx.com/npm/');}})

3. Fresh installation of dependency packages

We can run npm ci to reinstall our software dependency package. It is commonly used in automated environments such as CI / CD platforms.

Npm ci

It differs from npm install in the following ways:

It installs dependency packages according to package-lock.json, which ensures that the entire development team uses identical dependencies and avoids wasting time troubleshooting strange problems caused by inconsistent dependencies.

It installs the exact version of the software package mentioned in the package-lock.json file, does not need to calculate the dependency satisfaction problem, and greatly speeds up the node module installation process in most cases.

It removes the existing node_modules in the project and then installs it completely.

It does not write to package.json or any package locks: the installation is basically frozen

Npm install can install a single dependency package, while npm ci can only install the entire project at once, so it is impossible to install a single dependency package.

In addition, if package-lock.json is out of date (in conflict with package.json), then npm ci will report errors thoughtfully to prevent project dependencies from falling into an obsolete state.

Note: if you use npm ci, don't forget to add package-lock.json to the git repository.

4. Use shortcuts to install packages

This is the most useful feature that can be used to save time when installing software packages:

# Install package npm install Shortcut: npm I # Install devDependencies npm install-save-dev Shortcut: npm I-D # Install dependencies (This is default) npm install-save-prod Shortcut: npm I-P # Install packages globally npm install-global Shortcut: npm I-g

Install multiple packages in one command:

Npm i express cheerio axios

Install multiple packages with the same prefix:

Npm i eslint- {plugin-import,plugin-react,loader} express

5. NPM scripts

NPM scripts is the most useful feature. In addition to predefined front and rear hooks (often referred to as lifecycle scripts), it also supports custom scripts, such as:

Preinstall: it runs before any dependent packages are installed

We can also run npm run env in the project, listing all the npm environment variables that exist in the project. Includes package attributes prefixed with npm_package_.

Npm run env

Output:

Npm_config_save_dev= npm_config_legacy_bundling= npm_config_dry_run= npm_config_viewer=man. . Npm_package_license=ISC # Package properties npm_package_author_name=Ankit Jain npm_package_name=npm-tips-and-tricks # Name of our package

We can also access the above env variables in our code through process.env.npm_package_name and similar other variables.

Configure your own variables in package.json

We can define config in the package.json file to define our own variables as npm environment variables with the npm_package_config_ prefix, as follows:

"config": {"myvariable": "Hello World"}

Now, let's check in the env variable:

Npm run env | grep npm_package_config_

Output:

Npm_package_config_myvariable=Hello World

Define our custom script

The npm run command displays all the scripts we defined in the package.json file.

Let's add some custom scripts to package.json:

"scripts": {"test": "echo\" Error: no test specified\ "& & exit 1", "start": "node index.js", "echo-hello": "echo\" Hello\ "," echo-helloworld ":" echo\ "Helloworld\", "echo-both": "npm run echo-hello & & npm run echo-helloworld" "echo-both-in-parallel": "npm run echo-hello & npm run echo-helloworld", "echo-packagename": "echo $npm_package_name", "echo-myvariable": "echo $npm_package_config_myvariable", "echo-passargument": "npm run echo-packagename--\" hello\ "", "echo-pipedata": "cat. / package.json | jq .name > package-name.txt"}

Run the following command:

Npm run

Copy the code

Output:

# npm-tips-and-tricks (name of our package) Lifecycle scripts included in npm-tips-and-tricks: test echo "Error: no test specified" & & exit 1 start node index.js available via `npm run- script`: echo-hello echo "Hello" echo-helloworld echo "Helloworld" echo-both npm run echo-hello & & npm run echo-helloworld echo-both-in-parallel npm run echo-hello & npm run echo-helloworld echo- Packagename echo $npm_package_name echo-myvariable echo $npm_package_config_myvariable echo-passargument npm run echo-packagename-- "hello" echo-pipedata cat. / package.json | jq .name > package-name.txt

Run a simple npm script:

Npm run echo-hello # Output > echo "Hello" Hello

Run multiple scripts in a single npm script:

We can use & & to run multiple scripts. Both scripts are run continuously, that is, one by one.

Npm run echo-both # Output > npm run echo-hello & & npm run echo-helloworld > npm-tips-and-tricks@1.0.0 echo-hello > echo "Hello" Hello > npm-tips-and-tricks@1.0.0 echo-helloworld > echo "Helloworld" Helloworld

We can also use & to run multiple scripts in parallel.

Npm run echo-both-in-parallel # Output > npm run echo-hello & npm run echo-helloworld > npm-tips-and-tricks@1.0.0 echo-hello > echo "Hello" > npm-tips-and-tricks@1.0.0 echo-helloworld > echo "Helloworld" Hello Helloworld

Using npm environment variables in npm scripts

Npm run echo-packagename # Output > echo $npm_package_name npm-tips-and-tricks-npm run echo-myvariable # Output > echo $npm_package_config_myvariable Hello World

Pass parameters to another npm script

We can use-- to pass parameters to the npm script. In the following example, we pass hello as an argument to the echo-packagename script.

Npm run echo-passargument # Output > npm run echo-packagename-"hello" > npm-tips-and-tricks@1.0.0 echo-packagename > echo $npm_package_name "hello" npm-tips-and-tricks hello

Use pipes to pass data from one npm script to another

Npm run echo-pipedata # Output > cat. / package.json | jq .name > package-name.txt # Let's cat package-name.txt cat package-name.txt # Output "npm-tips-and-tricks"

6. Quickly navigate to the packaged document

We can quickly navigate to the documentation of any npm package simply by running the following command:

Npm docs OR npm home

If we want to check for any unresolved issues or archive any errors to the npm package, we can also navigate to the website by running the following command:

Npm bug

Similarly, npm repo opens the GitHub repo page in a browser.

7. Delete duplicate packages

We can remove duplicate dependencies by running the npm dedupe command. It simplifies the overall structure by removing duplicate packages and effectively sharing common dependencies among multiple dependent packages. This creates a flat tree with deduplication capabilities.

Npm dedupe or npm ddp

8. Scan for vulnerabilities in the application

We can run the npm audit command to scan for any vulnerabilities in any dependencies in our project. It will generate beautiful output in tabular format and display (we can also use JSON to get the output), if the other packages are multi-level / multi-dependencies, then other packages depend on this package.

Npm audit fix automatically installs patch versions of all bug packages (if available)

Npm audit fix

9. Check the environment

We can use the npm doctor command to run multiple checks in our environment, such as whether our npm CLI has sufficient permissions to install the javascript package and whether it can connect to the npm registry. It also checks the node and npm versions to verify that the cache has corrupted packages.

Npm doctor

10. Test your software package locally

NPM provides the npm link command so that we can work and test the package iteratively. NPM link will create a symbolic link to our test package in the global npm modules folder, which we can install into our test application by running npm link, which will create a symbolic link from the globally installed package to our project node_modules directory. It is useful when testing local packages or when using local npm packages.

Cd / test-package (package name is helloworld) npm link # Global symlink created cd / application npm link helloworld # Create symlink in node_modules

11. Check whether the package is out of date

We can use the npm outdated command to check all outdated npm packages. It also shows the latest version that should be installed for outdated packages.

Npm outdated-- long or npm outdated-l

We can also check the latest version of any npm package by simply running the following command:

# Shows the package information npm view or npm v # Shows the latest version only npm v version # Shows the list of all versions npm v versions

twelve。 List all installed packages

By running the npm list command, we can list all the npm packages installed in the project. It creates a tree structure that displays installed packages and their dependencies.

Npm list or npm ls

We can use the depth flag to limit the search depth:

Npm ls-depth=1 above is all the content of the article "how to use NPM". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.