nmp快速上手

胡韶卿
441 阅读4分钟

基于: npm火速上手 - 表严肃讲npm_哔哩哔哩_bilibili

npm 的安装与更新

安装

npm : Node Package Manager，node的包管理工具，所以只需在我们的电脑上安装 node.js 环境就可以运行 npm.

安装 node

  • 首先，需要查看一下本机有没有安装 node 环境，windows下按 win + R，在输入框内输入 cmd ，在弹出的黑色窗口中输入命令 node -v ，如果弹出以下提示说明电脑中没有 node 运行环境：

    image.png

  • 进入 node.js 官网下载 node.js：Node.js (nodejs.org)

  • 选择你需要下载的版本，这里我选择了 LTS 长期支持版：

    image.png

  • 无脑下一步：

    image.png

安装完成后，按下 win + R 输入 cmd 按下回车，输入 node -v 出现如下反馈代表安装成功：

image.png

这里 -v 表示 version —— 查看版本号
v16.14.0 表示我的 node.js 当前版本

更新

在 cmd 命令行窗口输入指令：

npm install npm@5.4.0 -g
# 更新到 5.4.0 版本

npm install npm@latest -g
# 更新到最新版本

-g 表示 global ，全局安装

npm 的功能

一键安装第三方框架

假设我们有一个项目文件夹 project ，在 vscode 中进入文件夹下的终端（快捷键 ctrl + shift + ~ ），使用 npm init -y 或 npm init --yes 命令利用 npm 对当前文件夹初始化。

-y 表示 yes， 跳过初始化过程中的配置选项

出现以下提示表示初始化成功：

image.png

之后我们发现在 project 文件夹下出现了一个名为 package.json 的文件.

如果我们想安装 jquery ，可以直接在终端输入 npm install jquery 或 npm i jquery，回车，等待一段时间：

image.png
表示安装成功.

再来看一下文件结构，多出了如下文件 node_modules -> jquery

如果我们想要安装 vue 同样可以输入命令 npm i vue，node_modules 目录下则会多出一些与 vue 相关的文件.

在 project 文件夹下建立一个 index.html 文件，在其写入以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="/project/node_modules/jquery/dist/jquery.min.js"></script>
  <script>
    $(function(){
      alert('Yo.');
    })
  </script>
</body>
</html>

在上面的代码中我们使用 <script> 标签引入了位于 node_modules 下的 jquery.js 并且 jquery 语法能够正确使用没有报错.

再来看一下我们的 package.json 文件：

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0",
    "vue": "^3.2.31"
  }
}

dependencies 下展示了我们引入的依赖版本信息.

这时我们尝试删除 node_modules 文件夹，使用 liveServer 打开 index.html：

image.png

image.png

发现无法alert弹窗且报错.

这时，再次进入终端，输入 npm install 或 npm i 指令：

image.png

则我们之前所下载的所有依赖和 node_modules 文件夹又重新出现. 再次打开 index.html 文件，可以解析 jquery ，无报错.

卸载依赖

由于我们之前使用 npm 命令安装了 vue，但是现在我们不想使用、或者用不到 vue 了，应该如何卸载呢？我们当然可以直接从 node_modules 文件夹中删除有关 vue 的文件，但是步骤较为繁琐，且容易不小心删除其他的文件.
在这里，我们可以直接使用 npm uninstall vue 命令来卸载 vue ，这样不仅可以删除 node_modules 中所有有关 vue 的内容，还会在 package.json 中删除 vue 的依赖项，下次再使用 npm i 命令安装依赖时则不会下载 vue

image.png

当然你也可以直接编辑 package.json 文件删除 vue ，之后重新执行 npm i 指令.

更新依赖

如果我们想要更新第三方的依赖，例如 jquery 则只需在命令行输入指令 npm update jquery

回退、更新版本

假如 我们现在使用的 jquery 版本是 3.2.1 ，而我们想要使用更新的 jquery3.6.0；或者我们正在使用新的版本想回退旧版本，需要在命令台输入 npm i jquery@3.6.0 或 npm i jquery@3.2.1，则会自动更新依赖，node_modules 中 dependencies 的内容也会同步更改.

npm 常用配置项

我们在初始化 npm 时，如果没有加上 -y 或 --yes 选项 则会弹出需要我们所配置的选项

image.png

package name ：项目名称，不允许有空格，全小写
version ：版本，默认为 1.0.0
entry point ：入口文件
description ：描述内容
script ：命令快捷方式，使用 npm run <command> 执行
author ：作者
license ：许可证
......

当然，我们也可以在 package.json 文件生成完毕后直接编辑 package.json 文件中的内容.

image.png

开发环境依赖

webpack 安装：

npm i webpack --save-dev

image.png

avatar
文章
阅读
粉丝