如何解决安装模板时控制台动画闪烁问题

原因分析:

​ 在我们使用cli-spinner给我们的脚手架添加自己的安装动画时,由于我们使用了npminstall作为我们安装npm包的依赖,npminstall本身在安装包的时候就有安装动画。所以我们自己给脚手架添加的动画和npminstall内置的有冲突,导致控制台交替输出,从而导致闪烁。后续思路为去掉npminstall动画出发,保留我们自己的动画为目的进行。

步骤一:

​ 查看npminstall配置,是否有去掉动画配置。通过查看使用说明,未能找到对应的配置。

await npminstall({
    // install root dir
    root: process.cwd(),
    // optional packages need to install, default is package.json's dependencies and devDependencies
    // pkgs: [
    //   { name: 'foo', version: '~1.0.0' },
    // ],
    // install to specific directory, default to root
    // targetDir: '/home/admin/.global/lib',
    // link bin to specific directory (for global install)
    // binDir: '/home/admin/.global/bin',
    // registry, default is https://registry.npmjs.org
    // registry: 'https://registry.npmjs.org',
    // debug: false,
    // storeDir: root + 'node_modules',
    // ignoreScripts: true, // ignore pre/post install scripts, default is `false`
    // forbiddenLicenses: forbit install packages which used these licenses
  });

步骤二:

​ 因为没有文档说明如何去掉,于是去翻看源码,查看local_install.js文件,找到默认动画相关核心代码如下

local_install.js

module.exports = async options => {
  options = formatInstallOptions(options);
  options.spinner && options.spinner.start();
    ...
}

format_install_options.js

module.exports = function formatInstallOptions(options) {
  options.trace = !!options.trace;
  if (options.trace) {
    // make sure detail enable when trace enable
    options.detail = true;
  }

  options.spinner = options.detail ? null : ora();
    ...
}

通过分析代码发现和默认安装动画相关的分别为两个在文档中未提及的参数trace、detail,和ora方法,其中ora方法内部对cli-spinner动画进行了封装,所以当detail为true的时候options.spinner为null,而options.spinner引用着一个cli-spinner中Spinner的实例,当options.spinner为null时,这个时候将没有动画。所以我们在执行npminstall方法的时候传入detail为true,如:npminstall({detail:true})从而达到我们希望去掉npminstall动画的目的。需要注意的是如果我们需要npminstall的默认安装动画,我们不能在执行npminstall方法的时候传入trace为true,否则传入的detail将会被覆盖为true。

步骤三:

​ 测试 trace=false,有加载动画,控制台输出如下

✔ Installed 1 packages
✔ Linked 1 latest versions
✔ Run 0 scripts
✔ All packages installed (1 packages installed from npm registry, used 631ms(network 630ms), speed 6.18KB/s, json 1(3.9KB), tarball 0B)

测试 trace=true,npminstall代码内部会将options.detail=true此时无加载动画,控制台输出如下

[1/1] imooc-cli-dev-template-vue2@1.0.0 installed at node_modules/_imooc-cli-dev-template-vue2@1.0.0@imooc-cli-dev-template-vue2
All packages installed (1 packages installed from npm registry, used 453ms(network 451ms), speed 8.64KB/s, json 1(3.9KB), tarball 0B)
[trace] 454ms 🏊  memory usage, rss: 50.16MB, heapTotal: 31.02MB, heapUsed: 16.84MB, external: 1.56MB; 💻  os free: 41.12MB, os load: 4.5, 5.1, 5.3; 🏃  cpu usage, user: 0, system: 0

通过设置detail为true动画是可以去掉了,但是安装信息任然存在,通过查看代码发现最终结果日志在local_install.js 569行打印。代码如下

  if (options.spinner) {
    options.spinner.succeed(util.format(...logArguments));
  } else {
    options.console.info(...logArguments);
  }

思考:如何让npminstall保持沉默,不输出任何信息?

方式一:

​ 改local_install.js源码,手动改肯定是不行的,可否脚手架代码更改?因为js是动态语言/解释执行,实际上通过找到npminstall包,然后找到local_install.js,通过nodejs提供的文件读写能力干掉以上代码应该可行。细思极恐啊!!!

Copyright © imooc-lego (2020 - present) all right reserved,powered by GitbookFile Modify: 2021-06-27 08:04:56

results matching ""

    No results matching ""