node.js:包资源管理器npm
什么是npm
npm全称node package manager,是node包管理和分发工具。相当于maven
- npm可以很方便的下载js库,管理前端工程。
- 最新版本的node.js以及集成了npm工具。
查看当前npm版本:
命令行输入: npm -v
npm命令
初始化工程
init命令是工程初始化命令
建立一个空文件夹,在命令提示符进入该文件夹 执行命令初始化
npm init
按照提示输入相关信息,如果是用默认值则直接回车即可。
* name: 项目名称
* version: 项目版本号
* description: 项目描述
* keywords: {Array}关键词,便于用户搜索到我们的项目
最后会生成package.json文件,这个是包的配置文件,相当于maven的pom.xml
我们之后也可以根据需要进行修改
本地安装
install 安装一个模块,仅用于当前工程.
将js库安装在当前目录下
在上一个工程的基础上执行:
npm install express
可以安装express模块(node的web框架)
如果成功执行了该命令,会在当前目录下出现一个node_modules文件夹和package-lock.json文件
- node_modules文件夹用于存放下载的js库
- package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖,以便后续重新安装的时候生成相同的依赖,而忽略项目开发过程中有些依赖已经发生的更新。
- 打开package.json文件,发现刚才下载的express已经添加到依赖列表中了.
关于版本号定义: Redis 1.8.9 主版本.次版本.小版本
指定版本:比如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:安装最新版本。
全局安装
本地安装,会将js库安装在当前目录,全局安装会将库安装到你的全局目录下。
查看全局目录在哪里
D:\workspace\node.js\npm> npm root -g
C:\Users\LENOVO\AppData\Roaming\npm\node_modules全局安装jquery
npm install jquery -g
批量下载
从网上下载某些代码,发现只有package.json,没有node_modules文件夹,这时我们需要通过命令重新下载这些js库.
进入目录(package.json所在的目录)输入命令
npm install
此时,npm会自动下载package.json中依赖的js库.
淘宝NPM镜像
使用npm下载资源会很慢,所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。
输入命令,进行全局安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
查看cnpm的版本
cnpm -v
使用cnpm
cnpm install 需要下载的js库
将 课前资料\前台开发资源\脚手架\后台\vueAdmin-template-master.zip 解压到你自己的练习目录,解压后目录结构如下:
package.json中定义了该工程所需要的依赖,我们需要将依赖下载下来,使用上面学习的命令
进入解压目录,执行cnpm install命令,效果如下:
执行完毕后,我们会发现工程中多了一个 node_modules 文件夹,里面就是刚才下载下来的相关依赖,如下图:
运行工程
package.json中定义的脚本如下
- dev是开发阶段测试运行
- build是构建编译工程
lint 是运行js代码检测
进入需要运行的工程目录,在命令行窗口执行以下命令:npm run dev
编译工程
编译后的代码会放在dist文件夹中【前提:先删除dist文件夹中的文件】
进入命令提示符输入命令
dist目录下只有个静态页面,和一个static文件夹,这里面的内容可以直接用于Nginx部署
这种工程我们称之为单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。【这里其实是调用了webpack来实现打包的】
还没有评论,来说两句吧...