项目中调试本地组件库的实践方案

一、简述

每个公司都有可能有自己的组件库，我们在开发组件库时，一般都要将组件库里的组件应用在自己的项目上，项目与组件库在本地进行调试就需要一套很好的解决方案。下面我们就对比几个常见的方案，以及它们存在的问题。

二、npm link

项目中进行组件库调试，首先想到的就是使用npm link方案。
在组件库的根目录执行

npm link

在开发项目的根目录执行

npm link 组件库名

它会在开发项目的node_modules文件夹中创建一个指向组件库的软链接。

• 存在的问题：

1. 每次修改并保存代码后要都要手动执行一遍npm run build和npm link。
2. 大多数情况下会出现下面的报错
   
   原因 1: React 和 React DOM 的版本不一样的问题
   原因 2: 可能打破了 Hooks 的规则
   原因 3: 在同一个项目中使用了多个版本的 React

三、使用yalc库

yalc是一个非常棒的工具，可以在本地开发和测试包/库，而不用发布到npm。

全局安装

npm install yalc –g

在组件库根目录下执行publish，发布组件库到本地仓库

yalc publish

在开发项目的根目录下执行add，安装该组件库

yalc add 组件库名

修改组件库代码后，推送更新

yalc push

本地调试完成后，在开发项目的根目录下执行remove

yalc remove –all

• 存在的问题：

1. 修改组件库代码后，需要手动执行yalc push去更新开发项目的node_modules中组件库的代码，页面才会更新。
2. 我们在开发组件库时一般都需要编译打包才能使用，所以在执行yalc push之前还要先执行npm run build进行打包，对于这一套操作yalc没有提供对应的自动化方案。

四、yalc与yalc-watch配合

yalc-watch是一个专门为实现监听组件库代码修改然后自动执行yalc push的库，它是一个很小的命令行工具。

安装

npm i yalc-watch -D

在package.json文件中添加配置

{
    "scripts": {
        " yalc-watch": "yalc-watch"
    },
    . . .
    "yalcWatch": {
        "watchFolder": "build",
        "buildWatchCommand": "tsc --watch",
        "extensions": "js, png,svg,gif,jpeg,css",
    }
}

启动监听

npm run yalc-watch

• 存在的问题：
  修改并保存组件库代码后它会立即执行yalc push，而我们的需求是在这之前要先执行npm run build，将组件库编译打包，而这个库满足不了我们的需求，该库也很长时间没人维护了。

五、yalc与yalc-watch2配合

没有库能解决我们的需求，那我就自己写了个库，yalc-watch2，在原先的基础加上了我们需要的功能即可。

安装

npm i yalc-watch2 -D

在package.json文件中添加配置

{
    "scripts": {
        " yalc-watch2": "yalc-watch2"
    },
    . . .
    "yalcWatch2": {
        "watchFolder": "src",
        "buildWatchCommand": "tsc --watch",
        "extensions": "js,jsx,ts,tsx,png,svg,gif,jpeg,css,less",
        "prePushCommand": "npm run build"
    }
}

启动监听

npm run yalc-watch2

最终实现的效果就是，当我们修改并保存了组件库代码后，会执行npm run build进行组件库的编译打包，然后执行yalc push –changed，开发项目中依赖的组件库代码就会被更新，热更新检测到文件的修改后就会重新编译，然后更新页面，整个过程全部自动化完成，不需要人为操作。

如果我们修改了组件库代码，页面却一直不更新，可能是因为我们使用了webpack的缓存功能，在进行调试时可以先将webpack的缓存功能禁用掉，修改webpack.config.js配置：{ cache: false }。

更多个人文章

1. hashHistory和browserHistory的区别
2. 全网最全Autoit3基础教程及实战案例
3. 面试秘籍之排序算法
4. 一款将打包后的Chrome插件自动化加载到浏览器的webpack插件