依旧是迟到很久的阅读源码系列 非常感谢若川大佬的阅读源码活动~

1.阅读前准备

曾经npm install之后会发现会自动弹出npm依赖包升级的页面screenshot.png

现在就来研究下到底是怎么做到的

2.源码地址

https://github.com/yeoman/update-notifier

3.开始阅读

UpdateNotifier构造函数中，分为三部分函数：check()检查函数；fetchInfo获取信息函数；notify通知函数

整个代码中引用了很多第三方库

先从UpdateNotifier构造函数入手

3.1 构造函数

  1. constructor(options = {}) {
  2.       // 主要是对传入的options对象中的参数进行校验
  3.         this.options = options;
  4.         options.pkg = options.pkg || {};
  5.         options.distTag = options.distTag || 'latest';
  7.         // Reduce pkg to the essential keys. with fallback to deprecated options
  8.         // TODO: Remove deprecated options at some point far into the future
  9.         options.pkg = {
  10.             name: options.pkg.name || options.packageName,
  11.             version: options.pkg.version || options.packageVersion
  12.         };
  13.         // 如果缺少必要 则抛出异常
  14.         if (!options.pkg.name || !options.pkg.version) {
  15.             throw new Error('pkg.name and pkg.version required');
  16.         }
  18.         this.packageName = options.pkg.name;
  19.         this.packageVersion = options.pkg.version;
  20.       // 检查传入的时间戳，如果不是时间则采用默认时间戳
  21.         this.updateCheckInterval = typeof options.updateCheckInterval === 'number' ? options.updateCheckInterval : ONE_DAY;
  22.         this.disabled = 'NO_UPDATE_NOTIFIER' in process.env ||
  23.             process.env.NODE_ENV === 'test' ||
  24.             process.argv.includes('--no-update-notifier') ||
  25.             isCi();
  26.         this.shouldNotifyInNpmScript = options.shouldNotifyInNpmScript;
  28.         if (!this.disabled) {
  29.             try {
  30.                 const ConfigStore = configstore();
  31.                 this.config = new ConfigStore(`update-notifier-${this.packageName}`, {
  32.                     optOut: false,
  33.                     // Init with the current time so the first check is only
  34.                     // after the set interval, so not to bother users right away
  35.                     lastUpdateCheck: Date.now()
  36.                 });
  37.             } catch {
  38.                 // Expecting error code EACCES or EPERM
  39.                 const message =
  40.                     chalk().yellow(format(' %s update check failed ', options.pkg.name)) +
  41.                     format('\n Try running with %s or get access ', chalk().cyan('sudo')) +
  42.                     '\n to the local update config store via \n' +
  43.                     chalk().cyan(format(' sudo chown -R $USER:$(id -gn $USER) %s ', xdgBasedir().config));
  45.                 process.on('exit', () => {
  46.                     console.error(boxen()(message, {align: 'center'}));
  47.                 });
  48.             }
  49.         }
  50.     }

3.2 check检查函数

  1. check() {
  2.       // 如果出现以下几种情况时，则直接退出
  3.         if (
  4.             !this.config ||
  5.             this.config.get('optOut') ||
  6.             this.disabled
  7.         ) {
  8.             return;
  9.         }
  10.         // 获取包更新信息（第一次获取的时候为undefined）
  11.         this.update = this.config.get('update');
  13.         if (this.update) {
  14.             // 如果存在，则赋值最新版本
  15.             this.update.current = this.packageVersion;
  17.             // 并清理缓存
  18.             this.config.delete('update');
  19.         }
  21.         // 如果最后一次获取更新的时间小于用户设置的检查时间 则直接退出
  22.         if (Date.now() - this.config.get('lastUpdateCheck') < this.updateCheckInterval) {
  23.             return;
  24.         }
  26.         // 调用子进程执行check文件
  27.       // 这里的unref 方法用于断绝与父进程的关系，父进程退出不会造成子进程的退出
  28.         spawn(process.execPath, [path.join(__dirname, 'check.js'), JSON.stringify(this.options)], {
  29.             detached: true,
  30.             stdio: 'ignore'
  31.         }).unref();
  32.     }

在进行check函数的执行后，会进入check.js文件的执行，进一步看check.js中又发生了什么

  1. let updateNotifier = require('.');
  3. const options = JSON.parse(process.argv[2]);
  5. updateNotifier = new updateNotifier.UpdateNotifier(options);
  7. (async () => {
  8.     setTimeout(process.exit, 1000 * 30);
  9.     // 在这里继续调用updateNotifier中的获取数据的方法
  10.     const update = await updateNotifier.fetchInfo();
  12.     // 并更新最后更新检查时间的时间字段
  13.     updateNotifier.config.set('lastUpdateCheck', Date.now());
  14.     // 如果此时时间不是最新，则会更新为最新
  15.     if (update.type && update.type !== 'latest') {
  16.         updateNotifier.config.set('update', update);
  17.     }
  19.     // Call process exit explicitly to terminate the child process,
  20.     // otherwise the child process will run forever, according to the Node.js docs
  21.     process.exit();
  22. })().catch(error => {
  23.     console.error(error);
  24.     process.exit(1);
  25. });

check.js这里主要为开启子进程，获取最新版本信息的步骤，执行完成后将退出子进程

3.3 fetchInfo()获取信息函数

  1. async fetchInfo() {
  2.   const {distTag} = this.options;
  3.   // 这里主要通过懒加载的方式执行获取包信息的步骤
  4.   const latest = await latestVersion()(this.packageName, {version: distTag});
  6.   return {
  7.     latest,
  8.     current: this.packageVersion,
  9.     // 这里会做信息的diff
  10.     type: semverDiff()(this.packageVersion, latest) || distTag,
  11.     name: this.packageName
  12.   };
  13. }

3.4 notify()通知函数

  1.     notify(options) {
  2.         const suppressForNpm = !this.shouldNotifyInNpmScript && isNpm().isNpmOrYarn;
  3.         if (!process.stdout.isTTY || suppressForNpm || !this.update || !semver().gt(this.update.latest, this.update.current)) {
  4.             return this;
  5.         }
  7.         options = {
  8.       // 是否为全局安装
  9.             isGlobal: isInstalledGlobally(),
  10.       // 是否为yarn全局安装
  11.             isYarnGlobal: isYarnGlobal()(),
  12.             ...options
  13.         };
  15.         let installCommand;
  16.     // 根据yarn和npm的判断 展示不同的命令指示符给用户
  17.         if (options.isYarnGlobal) {
  18.             installCommand = `yarn global add ${this.packageName}`;
  19.         } else if (options.isGlobal) {
  20.             installCommand = `npm i -g ${this.packageName}`;
  21.         } else if (hasYarn()()) {
  22.             installCommand = `yarn add ${this.packageName}`;
  23.         } else {
  24.             installCommand = `npm i ${this.packageName}`;
  25.         }
  27.         const defaultTemplate = 'Update available ' +
  28.             chalk().dim('{currentVersion}') +
  29.             chalk().reset(' → ') +
  30.             chalk().green('{latestVersion}') +
  31.             ' \nRun ' + chalk().cyan('{updateCommand}') + ' to update';
  33.         const template = options.message || defaultTemplate;
  35.         options.boxenOptions = options.boxenOptions || {
  36.             padding: 1,
  37.             margin: 1,
  38.             align: 'center',
  39.             borderColor: 'yellow',
  40.             borderStyle: 'round'
  41.         };
  43.         const message = boxen()(
  44.             pupa()(template, {
  45.                 packageName: this.packageName,
  46.                 currentVersion: this.update.current,
  47.                 latestVersion: this.update.latest,
  48.                 updateCommand: installCommand
  49.             }),
  50.             options.boxenOptions
  51.         );
  53.         if (options.defer === false) {
  54.             console.error(message);
  55.         } else {
  56.             process.on('exit', () => {
  57.                 console.error(message);
  58.             });
  60.             process.on('SIGINT', () => {
  61.                 console.error('');
  62.                 process.exit();
  63.             });
  64.         }
  66.         return this;
  67.     }


4.总结

整个过程比较简单，主体就为updateNotifier构造函数，其中执行的步骤为：

  • new了一个updateNotifier对象
  • 执行check()函数
    • 判断是否需要执行check.js
  • 执行fetchInfo()函数获取信息
  • set(‘lastUpdateCheck’)设置最后获取更新的时间
  • set(‘update’)设置一个需要更新的列表
  • notify()函数，展示给用户目前可更新的依赖包，并根据包类型展示命令符