如何在 Angular cli 6 中实现 Chalk？答案

【问题标题】：How to implement Chalk in Angular cli 6?如何在 Angular cli 6 中实现 Chalk？
【发布时间】：2018-07-15 22:37:13
【问题描述】：

所以我正在构建一个 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');

【问题讨论】：

Angular 应用程序在浏览器中执行。不在你的壳里。控制台是浏览器控制台，而不是您的终端。浏览器执行代码，而不是 NodeJS。
你尝试声明 chalk 变量？例如declare const chalk: any; 否则我看不到你在哪里声明或以其他方式得到你正在调用blue 方法的“粉笔”。
@RoddyoftheFrozenPeas 我只是按照此处给出的说明进行操作：github.com/chalk/chalk

标签： angular typescript es6-modules chalk

【解决方案1】：

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

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

【讨论】：

我没有对您投反对票，您写的内容可能有效，但我想使用 chalk js 包来执行此操作。我想知道为什么我的粉笔实现不起作用。
这是我知道的在浏览器控制台中获取颜色的唯一方法，其他答案是正确的粉笔仅适用于 nodejs（服务器端）

【解决方案2】：

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

【讨论】：

【解决方案3】：

这与 ES5/CommonJS 或 ES6+ 风格没有任何关系，例如require 或 import。粉笔doesn't implement browser support，因此它不适用于 Angular 或任何前端脚本代码。粉笔 2 甚至 requires Node.js 4 or later.

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

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

【讨论】：