1. 基本概念
主要介绍vue.js、nodejs、NPM、verdaccio的基本概念和用途。
1.1. vue.js
vue.js 是最火的前端构建 Web 界面的 JavaScript 框架，也是一个通过简洁的 API 提供高效数据绑定和灵活组件的系统。
在ve.js中，一个核心的概念，就是让用户不再操作html的dom元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑。
一句话解释：vue是提高前端界面开发效率而集成了大量功能的js框架。
1.2. Nodejs
node.js不是一门语言，不是库，不是框架，只是一个javascript运行时环境。
node.js可以解析和执行javascript代码，以前只有浏览器可以解析执行javascript代码，现在的javascript可以完全脱离浏览器来运行，一切都归功于node.js。
在node这个javascript执行环境中为javascript提供了一些服务器基本的操作：比如文件读写，网络服务的构建，网络通信，http服务器等处理
nodejs能做什么？
Web服务器后台
命令行工具[比如可以开发npm，git，hexo]
对于前端开发，用到node最多的是他的命令行工具
一句话解释：nodejs在前端项目中的作用，类似于java语言的jdk。它提供了两个功能：本地开发时的前端服务器，以及编译时的运行环境。前端编译的过程实际上是，将vue框架以及各种高级js语言编译成浏览器能识别的基础的js语言。
1.3. NPM
npm，Node Package Manager的缩写，也就是软件包管理器。是Nodejs的默认包管理器。主要进行javascript的包管理。通过npm，我们可以很方便地进行javascript包的下载、升级，我们也可以把我们开发的javascript包共享给其他使用者。
目前npm作为Node.js的一个组件，在安装Node.js时，即可自动安装npm。
npm默认的源在国外，执行命令npm install，实际上是从国外的服务器地址上（https://registry.npmjs.ort/）下载包的过程，国内使用该镜像地址，经常出现链接不上或者下载速度慢的问题，所以国内常用的镜像地址是淘宝镜像：https://registry.npm.taobao.org/。
NPM能干什么？
使用npm命令，能直接将一个第三方依赖包下载到本地。如执行命令npm install -g verdaccio，就能将前端仓库verdaccio，安装到本地。Vue开发过程中依赖众多的依赖包，比如框架vue、组件库ant-design-vue、图表组件库echarts、视频播放器vue-video-player、国际化插件vue-i18n等大大小小的组件，都需要从npm的镜像地址上下载到本地。
一句话解释：npm在前端项目开发中作为下载、更新、上传依赖包的工具使用。
扩展知识：npm安装插件的过程
1.4. 仓库verdaccio
前端仓库，不是前端开发的必备项。是否需要仓库，要根据项目的前端架构设计以及项目的复杂性而选择。市面上前端仓库的插件也有好几款，verdaccio是体量较小、易于上手的仓库之一。
仓库的应用场景有以下几种情况：1、内部开发环境是离线环境，开发人员无法连接到淘宝镜像等npm公有仓库，此时需要搭建一个企业内部的私有仓库，解决离线开发下载依赖包的问题；2、公司产品很大，划分多个部门一起开发，为了保持风格统一，将某些公用模块抽取出来，做成一个依赖包，上传到仓库上，不同部门的人统一下载、升级该模块。典型的应用场景如云平台和云服务之间的关系。门户、鉴权等模块是统一提供的，每个服务不需要重复开发，去仓库下载即可；3、产品功能多，业务复杂，要分多个工程来开发，多个工程所依赖的公共模块，可开发成公共依赖包，发布到仓库，供其他工程使用。我们的产品就属于这一种。目前我们产品是内网开发，没有网络，所以verdaccio同时也满足场景一的描述。
依赖包查找流程如下图所示。
2. 前端工程编译
2.1. 单工程简单编译
一个简单的vue工程，其文件结构如下图所示：
package.json中提前配置好了该工程所需的依赖包列表，若需要中途安装一个第三方包，则该包的名字也会被自动写入到package.json中。也就是说，可以提前把依赖包名称登记在package.json中，也可以在下载包的过程中，用命令自动写入到package.json中。（package.json文件不仅仅保存了依赖包列表，还有该工程的其他信息，此处简化。）
node_modules文件汇集了众多的依赖包，该文件一般不提交到代码库中，编译时会重新下载，每次下载都是增量下载，只下载更新的包，或者新增加的包。
2.2. 前端项目完整编译
我们的项目有大概23个前端工程，包括1个基座工程（100_PortalManage）和22个插件工程。编译时，1个基座工程和22个插件工程，编译方式不同。
22个插件工程先编译，插件工程的编译流程如下所示：
基座工程编译如下所示：
完整的编译流程为，101到126是插件工程，编译插件工程时会生成包文件libs，上传到仓库verdaccio上；插件编译完成后，会编译基座100_portalManamge工程，编译基座工程前，先会将所依赖第三方包和刚才上传的插件包一起下载下来，再编译基座工程，最终生成可直接运行的文件，编译结束。