『手撕Vue-CLI』检查版本更新

原创

BNTang

修改于 2024-06-01 15:49:47

121

修改于 2024-06-01 15:49:47

文章被收录于专栏：『学习与分享之旅』『学习与分享之旅』

前言

经『手撕Vue-CLI』编译模板『下』介绍之后，nue-cli 的两套模板都已经到此就落幕了，但是还需要一个功能，那就是检查版本更新。

在我们平日里使用插件的时候，是不是经常会看到有插件更新的提示，这个功能就是检查版本更新，接下来就让我们来实现这个功能。

检查版本更新

在实现这个功能之前，得要将 nue-cli 发布到 npm 上，这样才能检查版本更新。

所以先来实现将 nue-cli 发布到 npm 上。

发布到 npm

首先需要在 npm 上注册一个账号，然后登录，登录之后就可以发布包了，这一步大家自行解决。

如果您使用的是 nrm 首先得要将源切换到 npm：

然后再通过 npm addUser 命令登录：

登录成功之后，就可以通过 npm publish 命令发布包了：

很不幸的是，我这里发布失败了，报错问题是 You do not have permission to publish "nue-cli". Are you logged in as the correct user?，说是什么没有权限，于是我去翻阅了资料，得知，npm 包名是全局唯一的，所以我这里的 nue-cli 已经被别人占用了，所以我就更改了 package.json 中的 name 字段，然后再次发布：

上 npm 账号查看，发现包已经发布成功了：

到此准备工作已经完成，接下来就是实现检查版本更新的功能了。

然后回到自己项目当中先将版本号还原回来，这个时候我们项目版本是（如果不是请自行更改为）1.0.0：

远程仓库是 1.0.1，这个时候如果当用户执行指令的时候如何去检查我们远程仓库的新版本内容呢？

update-notifier

这里要给大家介绍一个库，叫做 update-notifier，这个库可以帮助我们检查远程仓库的新版本内容。

npm：https://www.npmjs.com/package/update-notifier

首先我们需要安装这个库，我这里不采用最新版本，而是采用 5.1.0 版本：

npm install update-notifier@5.1.0

然后在我们的 create.js 文件中引入这个库：

const updateNotifier = require('update-notifier');

除了引入这个库之外，我们还需要引入一些其他的额外信息 package.json，这个信息是用来告诉 update-notifier 我们的包的名称和版本号的：

const pkg = require('../package.json');

接下来就是使用这个库了，我单独定义了一个方法叫做 checkVersion，这个方法用来检查版本更新：

const checkVersion = () => {
    const notifier = updateNotifier({
        // 第一个参数：package.json 中的内容
        pkg,
        // 第二个参数：检查频率，默认为 1 天，这里设置为 0，表示每次都检查
        updateCheckInterval: 0
    });

    // 调用 notifier.update 来检查是否有更新
    if (notifier.update) {
        console.log(`Update available: ${chalk.green(notifier.update.latest)}`);
    }
};

如上的代码还可以改一下写法，可以通过解构赋值的方式来写：

const checkVersion = () => {
    const { update } = updateNotifier({ pkg, updateCheckInterval: 0 });

    if (update) {
        console.log(`Update available: ${chalk.green(update.latest)}`);
    }
};

然后在 create 方法中调用这个方法：

checkVersion();

然后执行 nue-cli create xxx，这个时候就会提示我们有新版本了：

到此，检查版本更新的功能就实现了，但我觉得这个提示不够友好，所以我打算改造改造，顺便再给大家介绍一个库 boxen。

boxen

boxen 是一个用来在终端中显示框的库，可以用来美化我们的提示信息。

npm：https://www.npmjs.com/package/boxen

首先我们需要安装这个库，我这里不采用最新版本，而是采用 5.1.0 版本：

npm install boxen@5.1.0

然后在我们的 create.js 文件中引入这个库：

const boxen = require('boxen');

然后可以将提示信息通过 boxen 进行美化，代码如下：

const message = [];

message.push(
    `${chalk.bgYellow.black(' WARNI: ')}  Nue-Cli is not latest. \n`,
);

message.push(
    chalk.grey('current ')
    + chalk.grey(update.current)
    + chalk.grey(' → ')
    + chalk.grey('latest ')
    + chalk.green(update.latest),
);

message.push(
    `${chalk.grey('Up to date')
    }npm i -g ${pkg.name}`,
)

console.log(boxen(message.join('\n'), {
    padding: 2,
    margin: 2,
    align: 'center',
    borderColor: 'yellow',
    borderStyle: 'round',
}));