dev-torun:让组件库+yalc更丝滑简单

相信组件库开发 +yalc本地发包已经成为基本操作了，但是一个新的组件开发过程中，会有无数次的修改调试优化，

要么一开始就是在项目里面写代码，但是后面可能迁移的时候就要多费时间
要么直接在组件库里面写，但是不可避免的需要多次构建
这个过程手动去搞的话会很蛋疼，于是就写了dev-torun这个工具来避免脱发，还能尽早下班

配置说明

config.listen_dir：监听目录变化
config.task_delay：延迟时间(秒)执行任务；终端输出倒计时
config.task_cmd：执行任务；当config.listen_dir修改保存后：
- 当前有任务在执行：等到执行成功后，再次倒计时后执行任务
- 当前没有任务执行：开始倒计时，然后执行任务
config.task_done：config.task_cmd执行成功的回调函数

使用场景

组件库自动构建build
成功回调后，使用 yalc publish，然后在task_done回调里面在对应项目路径(project_cwd)执行yalc update，一般情况下项目会重新构建，第一次有问题的话，可能是因为项目启动缓存，可以重启对应项目试试

背景：由于组件库使用npm link会有一些奇奇怪怪的问题。这里使用yalc来本地模拟真实的npm包安装，对项目的影响基本无影响；.gitignore加上.yalc,package.json注意一下那个包的版本引用即可

安装

bash 复制代码

npm i @zr-lib/dev-torun

使用

确保在项目下已经执行过 yalc link your-package

在组件库根目录新建 dev-torun.config.js

javascript 复制代码

require('@zr-lib/dev-torun/jsTypes/config.types.js');

const npmCmd = process.platform === 'win32' ? 'npm.cmd' : 'npm';

/** @type {DevToRunConfig} */
module.exports = {
  listen_dir: './src/',
  task_delay: 5,
  task_cmd: npmCmd + ' run build && yalc publish',
  task_done: () => {
    // console.log(`\n🚀 task_done. ${new Date().toLocaleString()}\n`);
    const path = require('path');
    const { execSync } = require('child_process');
    const project_cwd = path.resolve(__dirname, '../your-project');
    // yalc update, (make sure has run 'yalc link your-package')
    const updateError = execSync('yalc update --replace', { stdio: 'inherit', cwd: project_cwd });
    if (updateError) throw updateError;
    else console.log('\n');
  }
};

添加 npm scripts

json 复制代码

{
  "scripts": {
    "dev-torun": "dev-torun"
  }
}

终端执行命令

bash 复制代码

npm run dev-torun

如果是全局安装的话，在终端进入组件库路径，直接执行dev-torun即可

实现

监听变化

使用 chokidar 监听变化

在 src/index.js

javascript 复制代码

const chokidar = require('chokidar');
const { handleTask } = require('./dev-torun.js');
const { config, listenStr } = require('./config-tool.js');

module.exports = function devToRun() {
  console.log(listenStr);

  chokidar
    .watch(config.listen_dir, { awaitWriteFinish: { stabilityThreshold: 100 } })
    .on('change', (filepath) => {
      const changeFilePath = `\n\n📢 ${filepath} changed. ${new Date().toLocaleString()}`;
      console.log(changeFilePath);
      handleTask();
    });
};

终端倒计时

在 src/dev-torun.js

javascript 复制代码

let countTimer;
/** 终端倒计时 */
function startCountDown(startCount, cb = () => {}) {
  function handleCount(currentCount) {
    if (currentCount <= 0) return cb();
    readline.clearLine(process.stdout, 0);
    readline.cursorTo(process.stdout, 0);
    process.stdout.write(`⏱️ ==== Waiting: ${currentCount}s ====`, 'utf-8');
    countTimer = setTimeout(() => handleCount(currentCount - 1), 1000);
  }
  handleCount(startCount);
}

执行任务

task_cmd 支持&&串行，方便在build之后本地publish

在 src/dev-torun.js

javascript 复制代码

let isTaskRunning = false;
/** 执行任务 */
function runTask(command = '') {
  console.log(`\n\n🌟=====Running:[${command}]=====🌟\n`);
  isTaskRunning = true;
  const taskError = execSync(command, { stdio: 'inherit' });
  if (taskError) throw taskError;
  isTaskRunning = false;

  if (config.task_done) config.task_done();
  console.log(listenStr);
  if (hasNextTask) handleTask();
}

let hasNextTask = false;
function handleTask() {
  hasNextTask = isTaskRunning;
  // 当前有任务在执行，待正常执行结束后将继续执行最新任务
  if (isTaskRunning) return;
  if (countTimer) clearTimeout(countTimer);
  startCountDown(config.task_delay, () => runTask(config.task_cmd));
}

配置类型 DevToRunConfig

jsDoc类型，查看下面 dev-torun.config.js使用方式

在 jsTypes/config.types.js

javascript 复制代码

/**
 * @typedef {object} DevToRunConfig
 * @property {string} listen_dir 监听目录(listen directory)
 * @property {number} task_delay 任务延迟/秒(task delay/seconds)
 * @property {string} task_cmd 执行的命令`bash`，支持`&&`串行 (bash command, support `&&`)
 * @property {Function} task_done `task_cmd`执行成功之后的回调(callback after `task_cmd` successed)
 */

最后

早点下班，减少焦虑