1

所以我正在构建一个 Angular CLI 6 应用程序，并且我想实现 Chalk 包以在我的控制台日志中添加一些样式。

出于测试目的，我在 app.component.TS 文件中导入了 Chalk，如下所示：

import { component } from '@angular/core';
import * as chalk_ from 'chalk';

 @Component({
    //not important 
 })

export class AppComponent {
title = 'My App';

constructor() {
  console.log(chalk.blue('Hello'));
}

chalk.blue 给我错误：属性蓝色不存在。当我将其更改为 chalk.default.blue 时，它​​可以工作，并且 VS 代码没有给我任何错误。

当我在浏览器中检查控制台时，我收到错误：index.js:8 Uncaught ReferenceError: process is not defined。

有人可以帮我解决这个问题吗？我也尝试过 Colors，我注意到所有这些包都需要您使用 require() 来实现它们。但这是 ES5 风格...

const chalk = require('chalk');

或者

var colors = require('colors/safe');
4

3 回答 3

4

上面的答案是正确的，但这里是如何在 chrome 控制台中获取颜色

console.log('%c this is colored', 'color: green; background: red;');

于 2018-06-19T20:39:29.160 回答
0

问题是 chalk 用于服务器端 javascript 而不是 web/浏览器（根据过程错误）。您可能需要找到另一个具有类似功能但适用于 web 的包。

于 2018-06-19T20:11:10.393 回答
0

这与 ES5/CommonJS 或 ES6+ 风格没有任何关系，例如require或import. Chalk没有实现浏览器支持，因此它不能在 Angular 或任何前端脚本代码中工作。Chalk 2 甚至需要 Node.js 4 或更高版本。

如前所述，您必须使用%c指令在浏览器中设置控制台输出的样式。

请参阅：https ://developer.mozilla.org/en-US/docs/Web/API/console#Styling_console_output

于 2018-07-15T14:37:13.827 回答