深入浅出：npm常用命令详解与实践【保姆级教程】-优快云博客

本文链接：https://blog.youkuaiyun.com/SWQ4520/article/details/140044582

在这里插入图片描述

大家好，我是CodeQi！

在我刚开始学习前端开发的时候，有一件事情让我特别头疼：管理和安装各种各样的依赖包。

那时候，我还不知道 npm 的存在，手动下载和管理这些库简直是噩梦。

后来，我终于接触到了 npm（Node Package Manager），它不仅帮我解决了依赖管理问题，还让我在开发效率上得到了质的飞跃。

今天，我决定把这些年来积累的 npm 使用经验分享给大家，希望能帮助你们更高效地进行开发。

在这篇【保姆级教程】中，我们将深入浅出地了解 npm 的常用命令，并通过具体的实践案例来加深理解。

准备好了吗？让我们开始吧！

1. 什么是 npm？

npm 全称为 Node Package Manager，是 Node.js 的包管理工具和默认包管理器。它的主要功能包括：

包管理：安装、卸载、更新和查看包。
依赖管理：自动处理包的依赖关系。
脚本运行：通过 npm scripts 运行常见任务。
包发布：将自己的包发布到 npm 仓库。

npm 是每个 Node.js 开发者必备的工具，熟练使用它可以大大提升我们的开发效率。

2. 安装和配置 npm

2.1 安装 Node.js 和 npm

要使用 npm，首先需要安装 Node.js。

可以在 Node.js 官网下载并安装最新版本的 Node.js。

安装 Node.js 时会自动安装 npm。

2.2 检查安装

安装完成后，打开终端（命令行），输入以下命令来检查 Node.js 和 npm 是否安装成功：

node -v
npm -v

如果显示出版本号，说明安装成功。

2.3 配置 npm

npm 提供了一些配置选项，可以通过命令行进行设置。

例如，我们可以设置全局安装包的路径和缓存路径：

npm config set prefix /usr/local
npm config set cache /home/user/.npm-cache

我们还可以通过以下命令查看所有的配置项：

npm config list

3. 基本命令详解

3.1 初始化项目

在开始使用 npm 管理项目之前，我们需要先初始化一个项目。

初始化项目会创建一个 package.json 文件，用于描述项目的基本信息和依赖关系。

npm init

执行该命令后，npm 会提示你输入一些项目信息，例如名称、版本号、描述、入口文件、作者等。

也可以使用 -y 参数跳过所有提示，使用默认值初始化项目：

npm init -y

3.2 安装依赖

安装依赖是 npm 最常用的功能之一。可以使用以下命令安装依赖包：

npm install <package-name>

例如，安装 lodash：

npm install lodash

默认情况下，npm 会将包安装到 node_modules 目录，并将依赖信息添加到 package.json 文件中的 dependencies 字段。

开发依赖

如果某个依赖只在开发过程中需要，而不需要在生产环境中使用，可以将其安装为开发依赖：

npm install <package-name> --save-dev

例如，安装 eslint 作为开发依赖：

npm install eslint --save-dev

3.3 卸载依赖

卸载依赖包时，npm 会从 node_modules 目录中删除包，并从 package.json 文件中移除对应的依赖项。

例如，卸载 lodash：

npm uninstall lodash

如果你想卸载一个开发依赖，可以使用以下命令：

npm uninstall eslint --save-dev

3.4 更新依赖

随着时间的推移，依赖包会发布新版本。

我们可以使用以下命令来更新依赖包：

npm update <package-name>

例如，更新 lodash：

npm update lodash

这种方法只会更新 package.json 文件中指定版本范围内的依赖。

如果你希望更新到最新版本，可以使用 npm install <package-name>@latest 命令：

npm install lodash@latest

3.5 查看依赖

要查看当前项目中安装的所有依赖包，可以使用以下命令：

npm list

这会列出所有依赖包及其版本号。

如果只想查看顶级依赖（不包括子依赖），可以使用 --depth=0 参数：

npm list --depth=0

要查看全局安装的包，可以使用以下命令：

npm list -g --depth=0

4. 高级命令详解

4.1 运行脚本

npm 允许我们在 package.json 文件中定义脚本，并通过 npm run <script-name> 命令运行这些脚本。

例如，在 package.json 文件中添加以下内容：

"scripts": {
    "start": "node app.js",
    "test": "mocha"
}

然后，我们可以使用以下命令运行这些脚本：

npm run start
npm run test

4.2 全局安装

有些工具需要全局安装，这样可以在任何地方使用它们。

例如，安装 nodemon 作为全局工具：

npm install -g nodemon

安装完成后，你可以在终端中直接使用 nodemon 命令。

4.3 缓存管理

npm 会缓存下载的包，以便下次安装时更快。你可以使用以下命令清除缓存：

npm cache clean --force

要查看缓存的内容，可以使用以下命令：

npm cache verify

4.4 配置管理

npm 提供了灵活的配置选项。

你可以使用以下命令查看和设置配置项：

npm config list
npm config set <key> <value>
npm config get <key>
npm config delete <key>

例如，设置 registry：

npm config set registry https://registry.npm.taobao.org

4.5 发布包

如果你开发了一个有用的包，可以将它发布到 npm 仓库，与其他开发者分享。

首先，你需要登录 npm：

npm login

然后，在项目根目录下执行以下命令发布包：

npm publish

发布完成后，其他开发者就可以通过 npm install <package-name> 命令安装你的包。

5. 实践案例

让我们通过几个实践案例来加深对 npm 的理解。

5.1 创建一个简单的 Node.js 项目

首先，我们创建一个简单的 Node.js 项目，并使用 npm 管理其依赖。

初始化项目

在项目目录下，执行以下命令初始化项目：

npm init -y

这会生成一个基础的 package.json 文件。

安装依赖

安装 express 作为项目依赖：

npm install express

创建项目文件

在项目根目录下创建一个 app.js 文件，并添加以下内容：

const express = require('express');
const app = express();
const PORT = 3000;

app.get('/', (req, res) => {
    res.send('Hello, world!');
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

运行项目

在 package.json 文件中添加一个 start 脚本：

"scripts": {
    "start": "node app.js"
}

然后，执行以下命令启动服务器：

npm run start

现在，打开浏览器访问 http://localhost:3000，你应该会看到 “Hello, world!” 的信息。

5.2 使用 npm 管理前端项目

npm 不仅可以用于 Node.js 项目，还可以用于管理前端项目的依赖。让我们通过一个简单的前端项目来了解如何使用 npm 管理前端依赖。

初始化项目

在项目目录下，执行以下命令初始化项目：

npm init -y

安装前端依赖

安装 react 和 react-dom 作为项目依赖：

npm install react react-dom

创建项目文件

在项目根目录下创建以下文件结构：

/public
  index.html
/src
  index.js
/package.json

在 public/index.html 文件中添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="../src/index.js"></script>
</body>
</html>

在 src/index.js 文件中添加以下内容：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => (
    <div>
        <h1>Hello, React!</h1>
    </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

使用 Babel 和 Webpack

为了将 React 代码编译成浏览器可以理解的 JavaScript，我们需要使用 Babel 和 Webpack。首先安装这些工具：

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-dev-server html-webpack-plugin

配置 Babel

在项目根目录下创建一个 .babelrc 文件，并添加以下内容：

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

配置 Webpack

在项目根目录下创建一个 webpack.config.js 文件，并添加以下内容：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html'
        })
    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        compress: true,
        port: 9000
    }
};

添加 npm 脚本

在 package.json 文件中添加以下脚本：

"scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
}

运行项目

执行以下命令启动开发服务器：

npm run start

现在，打开浏览器访问 http://localhost:9000，你应该会看到 “Hello, React!” 的信息。

5.3 发布自己的 npm 包

发布自己的 npm 包是分享代码的重要方式。让我们通过一个简单的示例来了解如何发布 npm 包。

创建项目

在项目目录下，执行以下命令初始化项目：

npm init -y

创建包文件

在项目根目录下创建一个 index.js 文件，并添加以下内容：

module.exports = function greet(name) {
    return `Hello, ${name}!`;
};

创建 README 文件

在项目根目录下创建一个 README.md 文件，并添加以下内容：

# My First NPM Package

This is a simple npm package that greets a user.

## Installation

```bash
npm install my-first-npm-package

Usage

const greet = require('my-first-npm-package');
console.log(greet('World')); // Outputs: Hello, World!


#### 添加 .gitignore 文件

在项目根目录下创建一个 `.gitignore` 文件，忽略 `node_modules` 目录：

```plaintext
node_modules/

登录 npm

在发布包之前，需要登录 npm 账户。

如果还没有账户，可以在 npm 官网注册。然后使用以下命令登录：

npm login

发布包

确保 package.json 文件包含以下字段：

{
  "name": "my-first-npm-package",
  "version": "1.0.0",
  "description": "A simple npm package that greets a user.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "greet",
    "example"
  ],
  "author": "Your Name",
  "license": "ISC"
}

然后，在项目根目录下执行以下命令发布包：

npm publish

发布完成后，其他开发者就可以通过以下命令安装你的包：

npm install my-first-npm-package

6. 常见问题与解决

在使用 npm 的过程中，可能会遇到一些常见问题。

以下是一些常见问题及其解决方法。

6.1 权限问题

在全局安装包时，可能会遇到权限问题。

解决方法是使用 sudo 命令（在 Unix 系统上）或配置 npm 使用用户目录来安装全局包：

npm config set prefix ~/npm-global
export PATH=~/npm-global/bin:$PATH

将以上命令添加到 .bashrc 或 .zshrc 文件中，以便每次启动终端时自动配置路径。

6.2 缓存问题

有时，npm 的缓存可能会导致安装依赖失败。

可以通过清除缓存来解决：

npm cache clean --force

6.3 网络问题

如果遇到网络问题，可以尝试更换 npm 源。

例如，使用淘宝的 npm 镜像：

npm config set registry https://registry.npm.taobao.org

6.4 包版本冲突

在项目中可能会遇到依赖包版本冲突问题。

可以使用 npm ls 命令查看依赖树，找出冲突的包并手动解决。

7. 总结

通过这篇文章，我们深入浅出地探讨了 npm 的常用命令及其实际应用。

从初始化项目、安装和管理依赖，到发布自己的 npm 包，我们系统地了解了 npm 的强大功能。

关键点回顾

初始化项目：使用 npm init 创建项目的 package.json 文件。
安装依赖：使用 npm install 安装项目依赖，并区分生产依赖和开发依赖。
卸载和更新依赖：学习如何使用 npm uninstall 和 npm update 管理依赖包。
运行脚本：通过 npm run 执行自定义脚本，提升开发效率。
发布包：掌握如何创建、打包并发布自己的 npm 包。

希望这篇【保姆级教程】能够帮助你掌握 npm 的基本和高级用法，并在实际开发中得心应手。

如果你有任何问题或需要进一步的帮助，请随时联系我。

祝你编码愉快！Happy coding!

关注我，原创文章第一时间推送，点赞和收藏就是最大的支持❤️