如何在 ShellJS 命令执行期间运行 cli-spinner？答案

【问题标题】：How to have cli-spinner run during ShellJS command exec?如何在 ShellJS 命令执行期间运行 cli-spinner？
【发布时间】：2017-09-21 22:57:23
【问题描述】：

我目前正在尝试制作一个简单的命令行节点程序，让我可以轻松地为我制作的许多 React/Redux 应用程序创建样板。我正在使用ShellJS 执行控制台命令（我也尝试过使用Node's child_process。）问题是让cli-spinner 与执行终端命令一起工作。这是我的代码：

#! /usr/bin/env node
var shell = require('shelljs');
var userArgs = process.argv.slice(2);
var folderName = userArgs[0];
var Spinner = require('cli-spinner').Spinner;
var depSpin = new Spinner('Installing dependencies.. %s');
depSpin.setSpinnerString(10);

shell.mkdir(folderName);
shell.cd(folderName);

depSpin.start(); 
// I expect for the spinner to start here (before the execution of the commands.)

shell.exec('npm init -y', {silent: true});
shell.exec('npm install --save babel-core babel-loader babel-preset-es2015 babel-preset-react react-dom react-redux redux webpack', {silent: true});
shell.exec('npm install --save-dev babel-preset-env webpack-dev-server', {silent: true});

depSpin.stop(); 
// Since ShellJS should run synchronously, 
// the spinner should stop right after the last command finishes.

shell.touch('webpack.config.js');
shell.mkdir(['build', 'frontend']);

shell.cd('frontend');
shell.mkdir(['components', 'containers', 'reducers', 'store']);
shell.touch('app.js');

但是在运行程序时，它在安装依赖项时只是挂起而不显示任何内容。这与微调器代码甚至不在其中时相同。我还尝试删除depSpin.stop()，这只会使程序永远挂在微调器上。我感觉这个问题是由cli-spinner 和ShellJS 使用终端之间的冲突引起的。

【问题讨论】：

标签： javascript node.js command-line-interface shelljs

【解决方案1】：

我可以通过使用child_process 的spawn 来实现这个效果。我必须创建一个child_process.spawn 并运行与&& 连接的所有命令。这将控制台输出释放为专门的 cli-spinner 输出。然后我为子进程退出以停止微调器时做了一个事件处理程序。

#! /usr/bin/env node
var shell = require('shelljs');
var userArgs = process.argv.slice(2);
var folderName = userArgs[0];
var Spinner = require('cli-spinner').Spinner;
var depSpin = new Spinner('Installing dependencies.. %s');
var spawn = require('child_process').spawn;
var commandsDep = [
  'cd ' + folderName,
  'npm init -y',
  'npm install --save babel-core babel-loader babel-preset-es2015 babel-preset-react react-dom react-redux redux webpack',
  'npm install --save-dev babel-preset-env webpack-dev-server'
];
var depChild = spawn(commandsDep.join(' && '), {
  shell: true
});
depSpin.setSpinnerString(18);

shell.mkdir(folderName);
shell.cd(folderName);

depSpin.start();
depChild.on('exit', () => {
  depSpin.stop();
  shell.exec('clear');
  console.log('Installing dependencies.. ✓');
})

shell.touch('webpack.config.js');
shell.mkdir(['build', 'frontend']);

shell.cd('frontend');
shell.mkdir(['components', 'containers', 'reducers', 'store']);
shell.touch('app.js');

shell.cd('containers');
shell.touch(['AppContainer.js', 'Root.js']);

shell.cd('../reducers');
shell.touch('index.js');

shell.cd('../store');
shell.touch('configureStore.js');

【讨论】：

【解决方案2】：

根据 Owens 的回答，我自己制作了一个辅助方法来运行长命令，其中包含与普通 shelljs 命令内联的微调器；

const Spinner = require('cli-spinner').Spinner;
const spinner = new Spinner('installing.. %s');
spinner.setSpinnerString('|/-\\');
var spawn = require('child_process').spawn;

const longCommand = (command, onSuccess) => {
  return new Promise((resolve, reject) => {
    var process = spawn(command, { shell: true });
      spinner.start();
      process.on('exit', () => {
        spinner.stop();
        onSuccess();
        resolve();
      })
  })
}

const npmInstall = async () => {
  await longCommand("npm install", () => console.log(`NPM modules installed! ?`))
  // Other stuff
  shell.mkdir('new')
}

npmInstall()

【讨论】：