【新手向】深入解說npm的使用方法

1 年 ago

科, 雅

2 minutes

简要；概述；概览

我想在前端开发中，您经常会听到一个词叫做npm。
这次我想解释一下npm是什么，以及如何使用npm。

前提 – Qian ti

npmおよびnodeをインストール済み

首先，npm是什么呢？

npm是Node.js的包管理工具，用于管理包（库）。通过使用npm，它可以帮助我们管理包的依赖和冲突关系，因此在添加和更新包时，基本上都是通过npm进行操作。

创建一个应用程序

在使用npm创建应用程序时

npx create-react-app frontend

使用命令进行创建
这次将应用程序命名为frontend指定
当创建完成后，我认为它会变成这样的结构

tree
.
└── frontend
    ├── .gitignore
    ├── README.md
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── public
    └── src

package.json -> 包的配置文件

创建应用程序后会自动生成package.json文件。package.json是一个包含安装的软件包列表的文件。有了这个文件，即使是多人开发，也可以使用相同版本的软件包进行开发。而且，由于可以完整列出软件包的信息，因此非常方便。以下是package.json的示例结构。

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write './**/*.{ts,tsx,json}'",
    "lint:fix": "eslint --ext .js,jsx,.ts,.tsx --fix",
    "test": "jest"
  },
  "dependencies": {
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.13.5",
    "next": "^13.4.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^29.5.2",
    "@types/js-cookie": "^3.0.3",
    "@types/next": "^9.0.0",
    "@types/node": "^20.3.1",
    "@types/react": "^18.2.13",
    "@types/react-dom": "^18.2.6",
    "eslint": "^8.43.0",
    "jest": "^29.5.0",
    "prettier": "^2.8.8",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.1.3"
  }
}

包锁定.json

package.json和node_modules的结构发生变化时，会自动生成package-lock.json。
package-lock.json记录了每个包的依赖关系。
npm根据它来查找包的依赖关系等，所以它非常重要。
在GitHub Actions中，可以使用package-lock.json（锁定文件）来加快通过缓存安装包的速度，因此类似于package.json一样，通常进行版本管理。

依赖项与开发依赖项

在package.json文件中，列出了dependencies和devDependencies，用于对包进行分类和区分。
它们的区别如下所述。
有关包的安装方法将在后续的包安装说明中进行解释。

依赖

一般来说，我们需指定执行应用程序所需的软件包和库。

如本地化使用的软件包都会放置在dependencies中，别无他选。

开发依赖

一般而言，在开发和测试时需要指定所需的包和库。

prettier

在开发环境中，将仅用于开发的软件包全部放置在devDependencies内。例如，在构建时将编译为CSS的Tailwindcss，以及在编译时进行类型检查的Typescript等，通常也将不需要在运行时使用的软件包放置在devDependencies内。

安装软件包

依赖

在安装包时，请执行以下命令。
这些已安装的包都属于依赖关系。

npm install <パッケージ名>

npm install next

开发依赖

在安装devDependencies包时，请使用以下命令并附加–save-dev选项进行安装。

npm install --save-dev <パッケージ名>

npm install --save-dev typescript

只安装依赖项

在部署到生产环境时，我们希望只安装生产环境所需的软件包，因此执行下面的命令。

npm ci --omit=dev

在CI/CD等GitHub Actions工具中，安装软件包时不需要解决其依赖关系。

npm ci

请参考下方的官方文件以了解常见用法。

稿件

如果想要执行命令，请在scripts中进行记录。因为在下面的例子中使用了Next.js，所以按照官方文档的说明进行如下记录。例如，如果想要启动Next.js，可以这样记录。

npm run dev

通过npm运行等等
将常用命令等等记录在scripts中，可以让项目组的每个成员都能使用相同的命令，非常方便。

  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write './**/*.{ts,tsx,json}'",
    "lint:fix": "eslint --ext .js,jsx,.ts,.tsx --fix",
    "test": "jest"
  },

包裹的更新

通常，我们使用npm outdated来检测过时的软件包并更新指定的软件包。

npm outdated
Package                      Current  Wanted  Latest  Location                                  Depended by
@testing-library/react        13.4.0  13.4.0  14.0.0  node_modules/@testing-library/react       code
@testing-library/user-event   13.5.0  13.5.0  14.4.3  node_modules/@testing-library/user-event  code
web-vitals                     2.1.4   2.1.4   3.3.2  node_modules/web-vitals                   code

您可以使用以下命令更新软件包。

npm update <パッケージ名>

npm update @testing-library/react

卸载软件包

您可以使用以下命令来卸载软件包。

npm uninstall <パッケージ名>

npm uninstall react-scripts

总结

使用npm可以了解有关前端开发中使用的包的管理方法等方面的知识。如果有其他方便的功能，我会随时添加。

请你提供下列内容的中文本地化释义，只需要一个选项：

参考