Posted at

reactプロジェクトでnpm startしたときにコンソールクリアしたくないときにやったこと

create-react-appで作ったプロジェクトはnpm startをやるとコンソールを全部クリアしてからサーバーが起動する。

これをやると後でメモしたかったコマンドとかが全部消えちゃう。(コマンド自体は履歴残るけど、実行結果とか)

なんとかならんか、と思って調べたけどそういうコマンドオプションはないようなので、順を追って調べてみた。

まずはpackage.jsonを見る


package.json

{

"name": "react",
.....
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

これを見ると、npm startreact-scripts startを呼び出しているようだ。次


node-modules/react-scripts/bin/react-scripts.js

....

switch (script) {
case 'build':
case 'eject':
case 'start':
case 'test': {
const result = spawn.sync(
'node',
nodeArgs
.concat(require.resolve('../scripts/' + script))
.concat(args.slice(scriptIndex + 1)),
{ stdio: 'inherit' }
);
....

../scripts/にあるファイルを実行している様子、さらに次


node-modules/react-scripts/scripts/start.js

....

const clearConsole = require('react-dev-utils/clearConsole');
....
const devServer = new WebpackDevServer(compiler, serverConfig);
// Launch WebpackDevServer.
devServer.listen(port, HOST, err => {
if (err) {
return console.log(err);
}
if (isInteractive) {
clearConsole();
}
console.log(chalk.cyan('Starting the development server...\n'));
openBrowser(urls.localUrlForBrowser);
});
....

お、clearConsole()という関数が、これかな?


node-modules/react-dev-utils/clearConsole.js

function clearConsole() {

process.stdout.write(process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H');
}

どうやら、このエスケープシーケンス使ってコンソールをクリアしているみたい。

ここをコメントアウトすれば、無事にコンソールクリアはされなくなった。

本当はissueとか上げるべきなんだろうけど、あくまで暫定処置。

npm startの仕組みとかもわかったからひとまずこれでよし。