npm的具体打包过程

你的名字 2023-06-03 10:00 1阅读 0赞

前面已经了解过了，npm是JavaScript的包管理工具。类似于java当中的maven、gradle和python中的pip。

## 一、安装npm环境 ##

npm是Node.js一起发布的，只是安装了Node.js，npm也就安装好了。可以从node的下载页中下载对应操作系统的安装包进行安装即可。

下载地址为[https://nodejs.org/en/download/][https_nodejs.org_en_download]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djMTY5NTA0MDg0Mg_size_16_color_FFFFFF_t_70]

选择长期支持版本的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

## 二、前端目录结构介绍 ##

首先来看下前端代码的目录结构

![在这里插入图片描述][20191006133116699.png]

**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"的字眼，证明依赖模块安装完成。

![在这里插入图片描述][20191006133254853.png]

这时候观察下项目的根目录，发现多了一个node\_modules目录，没错，这个目录就是依赖模块的安装目录。

开始打包。打包命令不一定是下面这个，可以问一下前端大佬。

[root@localhost mystatic]# cnpm run build:dev

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djMTY5NTA0MDg0Mg_size_16_color_FFFFFF_t_70 1]

打完包之后，观察下根目录，发现又多了个build目录（不一定叫build，这个得看前端代码的配置），没错，这个目录就是打完包文件存放的目录。

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

[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djMTY5NTA0MDg0Mg_size_16_color_FFFFFF_t_70]: /images/20230601/0986663a77254d13ad33db4bd0b7c38c.png
[20191006133116699.png]: /images/20230601/7d789102075149588d8938c750e08a89.png
[20191006133254853.png]: /images/20230601/484d095a15344fd6942144d0a66475f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djMTY5NTA0MDg0Mg_size_16_color_FFFFFF_t_70 1]: /images/20230601/67ebd7fc380a4d3a9c43ecbc1279f814.png