学习脚手架第三节：脚手架的分包和多模块调试

在开发脚手架之前要先了解本地如何调试，分为单个模块调试和分包后多模块调试。因为不可能发布一次，去 npm install 模块名，再去看开发的代码是否正确，效率太低，且产生不必要的版本迭代。

一、单个模块调试

方法一

通过在 view-test-cli （继 学习脚手架第二节 中你自己取的脚手架名称，后面同理，我这里继续沿用 view-test-cli）脚手架代码根目录的上一级目录下，安装 npm install view-test-cli -g，就会生成软链接，指向本地代码。

方法二（推荐使用）

通过在 view-test-cli 脚手架代码路径下，先移除脚手架 npm remove -g view-test-cli，再执行 npm link ，在本地开发环境中创建一个指向全局安装的包的软链接。
移除后，再执行 view-test-cli 命令，会提示找不到该命令。

再去看一看 which view-test-cli （which命令上一节有说）目录下的，在执行 npm remove 和 npm link 操作的前后对比，很明显看出 view-test-cli 现在指向了本地目录。‌lrwxrwxrwx 的第一个字符 l 表示这是一个软链接 (symlink)。如下图所示：

上面两种方法选用一种后，就可以进行本地调试了。

二、多模块调试

1. 分包

什么是分包：是指将应用程序的代码拆分成多个较小的包，以提高应用程序的性能和加载速度。
为什么要分包：有利于模块间各司其职，减少首次加载时间，提升用户体验，优化资源利用。

那么分包后就带来一个问题，如果我现在有一个lib库，这里我开发了一个 view-test-lib 包，并发布 npm publish 上线，方法同 view-test-cli。里面存放一个sum 方法，那么在我的 view-test-cli 包中如何使用这个lib库?

view-test-lib 和 view-test-cli 根目录放在同一级
目录结构如下：

代码如下：
view-test-lib\package.json

{
  "name": "view-test-lib",
  "version": "1.0.0",
  "bin": {
    "view-test-lib": "lib/index.js"
  },
  "main": "lib/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "type": "commonjs",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

view-test-lib\lib\index.js

module.exports = {
  sum(a, b) {
    return a + b;
  },
  sub(a, b) {
    return a - b;
  },
};

view-test-cli\bin\index.js

// 引入lib库
const lib = require("view-test-lib");
// 调用sum、sub方法
console.log("sum:", lib.sum(4, 2));
console.log("sub:", lib.sub(6, 2));

console.log("hellow my view-test-cli");

2. 线上发布模式 转 开发模式：链接本地脚手架

此时还是线上发布模式：

具体链接步骤：

cd view-test-lib
npm link
cd view-test-cli
npm link
npm link view-test-lib

npm link：将当前项目链接到 node 全局 node_modules 中作为一个库文件，并解析 bin 配置创建可执行文件
npm link view-test-lib：将当前项目中 node_modules 下指定的库文件链接到 node 全局 node_modules 下的库文件。【注：这里的 view-test-lib 对应你自己起的 lib 库名称】

执行完链接 link 步骤后：实现了通过软链接指向本地

进入 view-test-cli 的 node_modules 目录下，
可以看到 view-test-cli 的 node_modules 的 lib 库也成功的通过软链接指向了本地文件

现在就可以对 view-test-lib 库和 view-test-cli 脚手架进行本地开发调试了.

3. 开发模式 转 线上发布模式 (*难点)

当前是开发模式，脚手架命令都软链接指向本地文件

本地开发调试完毕后，又需要进行上线发布，就需要取消链接。

3.1 取消链接

具体步骤如下：

// 先取消lib库的链接
cd view-test-lib
npm unlink view-test-lib 
// 再进入cli脚手架目录，取消cli脚手架的链接
cd ..
cd view-test-cli
npm unlink view-test-lib
npm unlink view-test-cli
// 删除 node_modules 文件夹
rm -rf node_modules  
// 此时全局的软链接还在,需要remove移除掉，再安装线上依赖
npm remove view-test-lib -g
// 安装依赖项
npm install view-test-lib -S
// remove移除全局脚手架
npm remove view-test-cli -g

截图如下：

此时，查看全局的软链接都移除了

3.2 发布上线

发布前需要迭代脚手架版本号，先发布 view-test-lib 依赖库，再发布 view-test-cli
view-test-lib\package.json

{
  "name": "view-test-lib",
  "version": "1.1.0",
  ...
}

view-test-cli\package.json

{
  "name": "view-test-cli",
  "version": "1.0.1",
  ...
}

# 先发布 lib
cd view-test-lib
# npm login # 没有登录的先登录，登录过的可省略这一步
npm publish
# 再发布 cli
cd view-test-cli
npm publish

截图如下：

3.3 安装脚手架

// 发布后全局安装脚手架
npm install view-test-cli -g
// 执行测试命令
view-test-cli

截图如下：

总结

本篇讲述了脚手架单模块和多模块的调试，如何在线上环境和本地调试环境中来回切换，本地调试可以方便更好的开发。