1.什么是npm
npm全称node package manager,是node包管理和分发工具。可以理解为前端的maven。通过npm可以很方便的下载js库,管理前端工程。node已经集成npm工具,在cmd中输入npm -v
查看当前npm版本。
2.npm命令
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应用程序。