前面已经了解过了,npm是JavaScript的包管理工具。类似于java当中的maven、gradle和python中的pip。
一、安装npm环境
npm是Node.js一起发布的,只是安装了Node.js,npm也就安装好了。可以从node的下载页中下载对应操作系统的安装包进行安装即可。
下载地址为https://nodejs.org/en/download/
选择长期支持版本的linux版本进行下载。
安装node很简单,步骤为:解压–>添加环境变量–>使环境变量生效–>验证
[root@localhost src]# xz -d node-v10.16.3-linux-x64.tar.xz
[root@localhost src]# tar -xf node-v10.16.3-linux-x64.tar -C /usr/local/
[root@localhost src]# vim /etc/profile
[root@localhost src]# tail -n 2 /etc/profile
export NODE_HOME=/usr/local/node-v10.16.3-linux-x64
export PATH=$PATH:$JAVA_HOME/bin:$MAVEN_HOME/bin:$NODE_HOME/bin
[root@localhost src]# source /etc/profile
[root@localhost src]# node -v
v10.16.3
[root@localhost src]# npm -v
6.9.0
二、前端目录结构介绍
首先来看下前端代码的目录结构
config目录中是一些"乱七八糟"的配置
public目录中是一些页面公用的代码
scripts目录中是一些打包的时候用的js文件
src目录中是项目的源码
package.json和package-lock.json这两个文件就是打包时候的关键文件了。概括的说,package.json文件的作用是指定项目依赖模块和对应的版本信息。但是package.json文件只能锁定大版本,也就是版本号的第一位,并不能锁定后面的小版本,每次npm install的时候都是拉取的该大版本下的最新版本,为了稳定性考虑,我们几乎是不改随意升级依赖包的。所以package-lock.json文件就出来了,当你每次安装一个依赖的时候就锁定在你安装的这个版本。
三、前端安装依赖和打包
在用npm安装依赖模块之前,我们先安装阿里定制的cnpm命令行工具来代替默认的npm。因为用cnpm之后,默认用的就是国内的淘宝镜像源,速度相比npm要快上不少。
[root@localhost src]# npm install -g cnpm --registry=https://registry.npm.taobao.org
开始安装依赖
[root@localhost mystatic]# cnpm install
安装完之后,在最后一行会出现"All packages installed"的字眼,证明依赖模块安装完成。
这时候观察下项目的根目录,发现多了一个node_modules目录,没错,这个目录就是依赖模块的安装目录。
开始打包。打包命令不一定是下面这个,可以问一下前端大佬。
[root@localhost mystatic]# cnpm run build:dev
打完包之后,观察下根目录,发现又多了个build目录(不一定叫build,这个得看前端代码的配置),没错,这个目录就是打完包文件存放的目录。
到这里,一个前端项目的打包过程就基本讲完了。