1. 什么是 NPM
NPM 全称 node package manager, 是 node 包管理和分发工具. 可以理解为前端的 maven. 通过 NPM 可以很方便的下载 JS 库, 管理前端工程. node 已经集成 NPM 工具, 在 cmd 中输入 NPM -v 查看当前 NPM 版本.
官网地址: https://www.npmjs.cn/
2.1 初始化工程
init 命令是工程初始化命令. 建立一个空文件夹, cmd 中输入
NPM init
按照提示输入相关信息, 如果是用默认值则直接回车即可.
name: 项目名称
version: 项目版本号
description: 项目描述
keywords: {Array} 关键词, 便于用户搜索到我们的项目
最后会生成 package.JSON 文件, 这个是包的配置文件, 相当于 maven 的 pom.xml
2.2 本地安装
install 命令用于安装某个模块, 若想安装 express 模块 (node 的 web 框架), 输出命令为:
NPM install express
在该目录下已经出现了一个 node_modules 文件夹 和 package-lock.JSON 文件.
node_modules 文件夹用于存放下载的 JS 库 (相当于 maven 的本地仓库);
package-lock.JSON 是当 node_modules 或 package.JSON 发生变化时自动生成的文件. 这个文件主要功能是确定当前安装的包的依赖, 以便后续重新安装的时候生成相同的依赖, 而忽略项目开发过程中有些依赖已经发生的更新.
我们再打开 package.JSON 文件, 发现刚才下载的 express 已经添加到依赖列表中了.
关于版本号定义:
指定版本: 比如 1.2.2, 遵循 "大版本. 次要版本. 小版本" 的格式规定, 安装时只安装指定版
本.
波浪号 (tilde)+ 指定版本: 比如~ 1.2.2, 表示安装 1.2.x 的最新版本 (不低于 1.2.2), 但
是不安装 1.3.x, 也就是说安装时不改变大版本号和次要版本号.
插入号 (caret)+ 指定版本: 比如? 1.2.2, 表示安装 1.x.x 的最新版本 (不低于 1.2.2), 但
是不安装 2.x.x, 也就是说安装时不改变大版本号. 需要注意的是, 如果大版本号为 0, 则插
入号的行为与波浪号相同, 这是因为此时处于开发阶段, 即使是次要版本号变动, 也可能带来程序的不兼容.
latest: 安装最新版本.
2.3 全局安装
本地安装会将 JS 库安装在当前目录, 而使用全局安装会将库安装到全局目录下. 全局目录的路径可以修改, 修改详情请自行百度.
查看全局目录路径:
NPM root -g
若全局安装 vue:
NPM install vue -g
2.4 批量下载
若从网上下载源码时, 只有 package.JSON, 没有 node_modules 文件夹, 可以通过 install 命令重新下载所依赖的 JS 库.
进入 package.JSON 所在的目录, 输入命令:
NPM install
NPM 会自动下载 package.JSON 中依赖的 JS 库
2.5 淘宝 NPM 镜像
使用 NPM 下载资源很慢, 可以安装 cnmp(淘宝镜像) 来加快下载速度.
cmd 中输入命令, 全局安装 cnmp:
NPM?install?-g?cnpm?--registry= https://registry.npm.taobao.org/
查看 cnpm 版本:
cnpm -v
使用 cnpm:
cnpm install 需要下载的 JS 库
2.6 运行工程
若想运行某个工程, 使用 run 命令.
若 package.JSON 中定义的脚本为:
dev 是开发阶段测试运行
build 是构建编译工程
lint 是运行 JS 代码检测
运行 dev:
NPM run dev
2.7 编译工程
代码编译后就可以将工程部署到 nginx 中了, 编译后的代码会放在 dist 文件夹中.
编译命令: 实质是底层调用 webpack 命令来实现打包的
NPM run build
编译后可以看到 dist 文件夹中只有静态页面和一个 static 文件夹, 这种工程称之为单页 Web 应用 (single page Web application,SPA), 就是只有一张 Web 页面的应用, 是加载单个 html 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序.
NPM 入门
来源: http://www.bubuko.com/infodetail-3286878.html