npm的具体打包过程

前面已经了解过了，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，这个得看前端代码的配置），没错，这个目录就是打完包文件存放的目录。

到这里，一个前端项目的打包过程就基本讲完了。