什么是NPM?
npm全程为Node Package Manager,他是node包管理和分发工具。其实我们可以把npm理解为前端的Maven
我们可以通过npm很方便地下载js库,管理前端工程
最新版本的Node.js已经集成了npm工具,在命令提示符输入npm -v可以查看当前npm版本
常用的NPM命令
1.init初始化工程
init命令是工程初始化命令,建立一个空文件夹,在命令提示符进入该文件夹执行命令初始化
npm init
按照提示输入相关信息,如果是用默认值则直接回车即可
name:项目名称
version:项目版本号
description:项目描述
keywords:{Array}关键字,便于用户搜索到我们的项目
entry point:从哪一个js开始运行,选择一个js入口点
最后生成package.json文件,这个是包的配置文件,相当于Maven中的pom.xml
2.install本地安装
install命令用于安装某个模块,如果我们想要安装express模块(node的web框架),只需要输入
npm install express
如果出现了黄色字体代表是警告信息,可以忽略,代表你已经成功执行了该命令
在该目录下会出现一个node_modules文件夹和package-lock.json
node_modules文件夹用于存放下载的js库(相当于maven的本地仓库)
package-lock.json是node_modules 或 package.json发生变化时自动生成的文件,这个文件主要是确定当前安装包的依赖,以便后续重新安装的时候生成相同的依赖,而忽略项目开发过程中有些依赖已经发生的更新
3.全局安装(-g)
上面我们讲述了本地安装命令,该命令会把js库安装到当前目录下,如果使用全局安装则会把js库安装到全局目录下
那么如何知道全局目录在哪呢?执行命令 npm root -g
比如我们需要全局安装jQuery
则执行命令 npm install jquery -g
4.批量下载
我们在网上下载某些代码时,发现只有package.json而没有node_modules文件夹,这时我们需要通过命令重新下载这些js库
这时候我们需要进入package.json文件所在目录,执行命令
npm install
此时,npm就会自动下载package.json中依赖的js库
5.修改为淘宝的NPM镜像
输入命令,进行全局安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装后,我们来查看一下cnpm的版本
cnpm -v
使用cnpm
cnpm install 需要下载的js库
6.运行工程
如果我们想运行某个工程,则使用run命令
如果package.json中定义的脚本如下
dev是开发阶段测试运行
build是构建编译工程
lint是运行js代码检测
npm run dev
7.编译工程
接下来我们测试一个代码的编译,编译后我们就可以将工程部署到nginx中了
编译后的代码会放在dist文件夹中,首先我们先删除dist文件夹中的文件,进入命令提示符输入命令
npm run build
生成后我们发现只有个静态页面和一个static文件夹
这个工程我们称之为单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序,实际上是调用Webpack实现打包的,关于Webpack,参照文章《Webpack快速入门》