前端基础建设(一)-npm篇

在拉钩教育偶然看到了前端基础建设相关的教程，学习时候就顺便记录一下前端团队在基础建设方面的一些工作。npm 篇

npm

npm 安装机制（v5 之后 ）

详细可以参考这篇文章，npm 安装机制

• npm install 执行之后，首先，检查并获取 npm 配置，这里的优先级为：项目级的 .npmrc 文件 > 用户级的 .npmrc 文件> 全局级的 .npmrc 文件 > npm 内置的 .npmrc 文件。
• 然后检查项目中是否有 package-lock.json 文件
• 如果有，则检查 package-lock.json 和 package.json 中声明的依赖是否一致，一致的话直接使用 package.json，从缓存或者网络资源加载依赖，
• 如果没有，则根据 package.json 递归构建依赖树。然后按照构建好的依赖树下载完整的依赖资源，在下载时就会检查是否存在相关资源缓存
  • 本地存在，则从缓存解压到 node_modules 中
  • 否则，就从 npm 远程仓库下载包，校验包的完整性，添加到缓存并且解压到 node_modules
• 最后生成 package-lock.json

npm 缓存机制

获取缓存路径执行命令，在 npm v5 版本之后，缓存数据均放在根目录中的_cacache 文件夹中

npm config get cache

_cacache 包含了三个目录:

• content-v2
• index-v5
• tmp

其中，content-v2 是 npm 包资源的二进制文件，修改后缀为.tgz 解压即可得到包资源，index-v5 是 content-v2 里文件的索引

在执行 npm install 时候，先下载到缓存当中，然后解压到 node_modules 中，，然后每次安装资源时候，根据 package-lock.json 中的 version，name，integrity 生成一个唯一的 key，去 index-v5 中查找到对应的 content-v2 缓存的二进制包。

下面是一些 npm 包相关的命令

查看本地包缓存路径 npm config get cache
清除本地缓存npm cache clean --force

这里借用一张别人的 npm 安装机制流程图

npm link 命令

开发组件库，如何验证该组件能在业务中正常运行？

1.需要完整测试用例
2.设计example目录或者加一个playground，启动开发服务验证组件运行情况
3.可以使用npm link软连接,将本地开发模块链接到对应的业务项目中运行
npm link
执行npm link npm-xxx(你的包名)，创建一个全局的软连接，验证完之后执行npm unlink取消

npm link 能够在工程上解决依赖包在任何一个真实项目中进行调试的问题，并且操作起来更加方便快捷

npx

首先要知道，npm 是 Node package manager 的简写，就是包管理器。说白了，就是只能用于管理包，而不能执行。而 npx 是什么呢？可以理解为是 npm 包的执行器，可以直接执行包的命令（node_modules 中的某个指令），不需要输入文件路径，还可以避免全局安装

$ npx @vue/cli -V

# 等价于

$ npm install @vue/cli -g
$ vue -V

部署 npm 私服，优化 CI/CD 流程

目前公司因为 npm 包镜像问题，构建服务期执行 npm install 时候速度过慢，而且有可能安装失败，导致每次在执行 CI/CD 自动化部署时候都需要手动打包代码然后上传，git 的提交记录上经常会看见各种 commit 信息是打包，虽然多 build 一下也没有什么，但是感觉还是有点繁琐，正好通过这次学习记录一下部署 npm 私服优化一下相关流程。

社区上主要有 3 种工具来搭建 npm 私服：nexus、verdaccio 以及 cnpm。

它们的工作原理相同，我们可以通过 nexus 的架构示例简单了解一下：

npm 镜像和安装问题推荐文章:聊聊 npm 镜像那些险象环生的坑

同一个项目团队，应该保证 npm 版本的一致