
## 前言

Rollup 是我在重构 [TNT.js](https://github.com/Bug-Duck/tntjs/tree/dev) 这个玩具框架时忽然发现的一个构建工具。因为需要升级整个 codebase 到 ES Modules ，所以一个好的构建工具十分重要。但是，这个项目之前用的“构建工具”就是把 TypeScript 编译成 JavaScript ，可变性并不强。在尝试使用 Webpack 的时候，我无论如何也没办法让编译产物通过 HTML 的 `script` 标签导入到页面中（这个项目是一个小前端框架，要能够在浏览器中运行，就必须使用 `script` 标签倒入，没有打包 HTML）。

然后在一位大佬的指引下，我发现了 [Rollup.js](https://github.com/rollup/rollup) ，原生支持 ESM ，感觉十分不错。于是，就诞生了这篇文章！

## 安装

```bash
$ npm i -g rollup
```

## 配置 Rollup

跟 Webpack 一样，Rollup 也用一个独立的 JS 配置文件存放自己的运行设置。在 Rollup 里，配置文件的名字是 `rollup.config.js` 。

我在这个项目里使用的配置文件长这样：

```js
import alias from "@rollup/plugin-alias";
import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import serve from "rollup-plugin-serve";

export default {
  input: "src/index.ts",
  preserveModules: true,
  treeshake: false,
  output: {
    format: "esm",
    sourcemap: true,
    dir: "./dist",
    name: "TNT"
  },
  plugins: [
    alias({
      entries: [
        { find: "runtime", replacement: "src/runtime" },
        { find: "plugins", replacement: "src/plugins" },
      ],
    }),
    resolve(),
    typescript(),
    serve(),
  ],
};
```

Rollup 也支持许多的插件，比如我这里用的 `plugin-alias` ，就是把 Webpack 里面的 `alias` 配置项移植了过来。这里需要注意，Rollup 原生并不支持 TypeScript ，需要单独安装 `@rollup/plugin-typescript` 插件才能使用。

我还是用了 `plugin-node-resolve` ，这个插件是用来解析导入 `node_modules` 中的模块的。最后的 `rollup-plugin-serve` 的作用就是在你运行 Rollup 时，自动启动一个开发服务器，提供预览。

在这里，我选用了 ESM 的打包方式，仅仅为了让我这个项目变得好玩点。`output.dir` 指定了输出目录。还需要注意的是，我关闭了摇树优化，因为我需要把所有的东西整体打包，而不是打包特定的部分。但是这带来的坏处就是需要手动检查导入，防止导入未使用的模块。

`preserveModules` 代表保留当前的所有模块，这样我就可以在构建后的代码中使用 `import` 语句了。

配置完了 Rollup 之后，可以用 `rollup -c` 来打包。当然，这样并不会热更新，你还需要指定 `-w` 参数来启动热更新。

至此，Rollup 已经完成了基本配置。但是，为了更好的开发体验，我还需要一个东西来热加载我的 HTML 文件 —— 但是并不是使用 Rollup（当然 Rollup 也支持导入 HTML ，只不过不符合我的需求）。

## 在 HTML 中使用 ESM 并热加载

在 HTML 里导入 ESM 还是比较简单的。在 `<script></script>` 标签上加入 `type="module"` 就行啦。然后，就可以在 `script` 标签里面使用 `import` 语句了：

```html
<script type="module">
  import TNT from "./dist/src/runtime/TNT.js";
  import { Value } from "./dist/src/plugins/tntjsapi-simp/ValueState.js";
  import { Globals } from "./dist/src/runtime/GlobalEnvironment.js";
  import { NumberType } from "./dist/src/runtime/SymbolTable.js";
  import { PluginMain as TemplatePlugin } from "./dist/src/plugins/TemplateLanguage/PluginMain.js";
  import { PluginMain as DebugPlugin } from "./dist/src/plugins/debug/PluginMain.js";
  import { PluginMain as TNTScriptPlugin } from "./dist/src/plugins/tntscript/PluginMain.js";

  window.onload = () => {
    console.log(Globals.getAllPlugins())
    const t = new TNT();
    new Value("testValue", NumberType).setValue(23333)
    console.log(Globals.symbolTable);
  };
</script>
```

需要注意的是，你不需要提前使用 `<script src="dist/xxx" />` 来加载 ESM 文件。

但是，如果你现在打开配置好的 HTML 文件，会得到一个错误：

```
index.html:1 
        
Access to script at 'file:///Volumes/Data/Develop/Nodejs/tntjs/dist/src/runtime/TNT.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.
```

看来是直接使用文件协议传输不受 ESM 的支持。

解决方法就是启动一个热加载服务器来伺服我们的 HTML 文件。我选用了 [live-server](https://github.com/tapio/live-server) 包来解决这个问题。

首先，安装 live-server ：

```
npm install -g live-server
```

然后，就可以在项目目录里直接运行 `live-server` 启动开发服务器啦！现在到 <http://localhost:8080/> 去看看吧。

## 总结

总的来说，Rollup 是一个非常好的构建工具，它可以让我们在编写代码的时候更加简单，省去繁琐的配置过程。但是，它的社区可能还不如 Webpack 成熟，所以目前来说 Webpack 可能略占上风。

最后放一下我一直提到的小项目的 GitHub 吧：<https://github.com/Bug-Duck/tntjs/tree/dev>

欢迎 star & fork ！


Rollup.js 初体验

Hey guys, I'm Sam Zhang.

**Edit: since a lot of you are commenting about it, I would like to mention one thing though that this "portfolio" is just made for fun and not recommended to use in a real world application if you're really looking for a job.**

Recently I've updated my personal website. Originally I used [LogTure](https://github.com/samzhangjy/logture) as my primary website, but I think it's not "cool" enough.

So I started building a cooler one. After Googling around, I decided to make a terminal-like site similar to [yasfu.net](https://yasfu.net/portfolio/) with Vue 3.

Vue 3 is still new to me though. I mainly work on React projects recently and didn't explore the new features introduced in Vue 3. So this time I decided to give it a try. And after struggling with errors, I finally finished this project.

**Demo: <https://samzhangjy.com/>**

**GitHub: <https://github.com/samzhangjy/VueTerm>**

And of course, feel free to report issues to me!

However there're some downsides about this project. One is that the current bash-like command system has some trouble handling complicated paths. So for example, when you type in `cd ../folder/subfolder` will cause an inner failure of `cd`.

Recursive might be a good way to solve this problem and I'll try to implement it into this project in the near future.

And here is the end of the article. Feel free to play around with my project!

I built a terminal-like portfolio with Vue 3


此为我在 B 站上发布的视频 [JS 花式输出 | 你真的会用 console.log 吗？](https://www.bilibili.com/video/BV1Eq4y1t7C1) 的文字稿。

<iframe src="//player.bilibili.com/player.html?aid=594140875&bvid=BV1Eq4y1t7C1&cid=514614537&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

## 引言

`console.log` 是每一个 JavaScript 开发者都会经常用到的函数。可能很多初学者第一次使用 JS 时，就是调用的它。

`console.log` 可能最广泛的用途就是输出调试信息了吧：

```js
console.log(current_processing);
```

当然，还有招聘信息：

![image-20220221194418180](https://s2.loli.net/2022/02/21/RiKjwpfabPA1xDu.png)

但是，你可能注意到了，百度这招聘信息写的挺花哨啊，这字还是红色的！

不知道各位会不会写，反正我第一次看见的时候是不会弄的。无论你会不会打印出这样的效果，继续往下看，一定会有所收获的。

## 彩色字？搞定！

首先，我们来看一下怎么来打印彩色字。

```js
console.log(msg)
```

这，是 JS `console.log` 的最基本形式，也可能是大部分人所熟知的形式。

但是，其实这个 msg 后面是有东西的 —— 正是那些不起眼的参数，能够让我们的 log 变得“上档次”。

根据 [MDN](https://developer.mozilla.org/en-US/docs/Web/API/console/log#syntax) 的定义，`console.log` 的定义如下：

```js
console.log(obj1 [, obj2, ..., objN]);
console.log(msg [, subst1, ..., substN]);
```

其中，`obj1 - objN` 代表的是要输出的 JS 对象。

而 `msg` 则是一个包含着各种控制字符的字符串，也是我们今天的主角。而后面跟着的 `subst1 - substN` 都是用来替换控制字符的特殊字符串。

首先，我们来看看怎么打印彩色字符吧。

```js
console.log("Hello, World")
```

这，是最基础的 Hello World 。如果你现在运行，会得到一个纯正血统的 JS HelloWorld。

但是，我们想要的是彩色输出！别急，我们先来认识一下第一个控制字符 —— `%c` 。有了它，你就可以随意往 console 里面堆积 CSS 了 —— 没错，这个 `%c` 代表着 CSS ！

只要把 `%c` 放在你要使用 CSS 的字符的前面，就能开始写 CSS 了。例如：

```js
console.log("%cHello, World")
```

下一步就是加上样式了。还记得之前的 `subst` 吗？它们现在可以派上用场了：

```js
console.log("%cHello, World", "color: red")
```

对，你没看错，就是 CSS ！一个 `%c` 对应着一个样式，而每一个 `%c` 都将会把从当前字符到下一个 `%c` 之前的一个字符渲染上对应的 CSS 样式。如果你用的是电脑端的话，可以按下 F12 试一试，就是这么简单！

![image-20220221201116931](https://s2.loli.net/2022/02/21/aAkF5poZmQNu9HJ.png)

如果你会一点 CSS 的话……你甚至可以弄成这样：

![image-20220221202058862](https://s2.loli.net/2022/02/21/inwxVNJ376uWame.png)

但是，这玩意更普遍的用途是这样的：

![image-20220221202230330](https://s2.loli.net/2022/02/21/FbGuKjq4pfmy7Tr.png)

这样的：

![image-20220221202319713](https://s2.loli.net/2022/02/21/wMCX6yHvkWcZi1r.png)

既然上面说了可以添加自定义 CSS ，那么我们应该能够完成这个挑战。

理论存在，实践开始。

先上最基础的无样式版本：

```js
console.log(
  `Powered by VueBlogger v0.1.0\n
GitHub: https://github.com/samzhangjy/VueBlogger\nPlease star & fork to support the author!`);
```

按照刚才说的方法，在 `VueBlogger` 前面加上 `%c` ，并添加相对应的样式：

```js
console.log(
  `Powered by %cVueBlogger v0.1.0\n
GitHub: https://github.com/samzhangjy/VueBlogger\nPlease star & fork to support the author!`,
  "background-color: #1A55ED; padding: 7px; color: #fff;"
);
```

但是，如果仅仅是这样，你会得到一个非常蓝的 console ：

![image-20220221202832979](https://s2.loli.net/2022/02/21/VkKgR3dUQEmotjO.png)

还记得刚才说的吗？

> 一个 `%c` 对应着一个样式，而每一个 `%c` 都将会把从当前字符到下一个 `%c` 之前的一个字符渲染上对应的 CSS 样式。

所以，我们只需要在 `v0.1.0` 前添加 `%c` 控制字符就 ok 啦：

```js
console.log(
  `Powered by %cVueBlogger%cv0.1.0\n
GitHub: https://github.com/samzhangjy/VueBlogger\nPlease star & fork to support the author!`,
  "background-color: #1A55ED; padding: 7px; color: #fff;",
  "background-color: #FCBF23; color: #000; padding: 7px;"
);
```

但是，这样还是会出现刚才的情况，只不过变黄了……

于是，我们可以再加个 `%c` ：

```js
console.log(
  `Powered by %cVueBlogger%cv0.1.0%c\n
GitHub: https://github.com/samzhangjy/VueBlogger\nPlease star & fork to support the author!`,
  "background-color: #1A55ED; padding: 7px; color: #fff;",
  "background-color: #FCBF23; color: #000; padding: 7px;",
  ""
);
```

现在我们的 console 输出正常了。是的，你可以通过把对应的 CSS 置空来消除前面的 CSS 效果！

那么第二个输出也就迎刃而解了，此处不再赘述。

哦对了，不是所有的 CSS 都能够移至到 console 里的 —— 请看 [MDN](https://developer.mozilla.org/en-US/docs/Web/API/console#outputting_text_to_the_console) 的详细说明。

当然，`console.log` 还有其他的控制字符 —— 例如 `%o, %d, %s, %f` 等，此处不再赘述，可以参见 [MDN](https://developer.mozilla.org/en-US/docs/Web/API/console#outputting_text_to_the_console) 查看更多信息。其中，`%d, %s, %f` 与其他语言中的格式化字符串很相似（例如 `C++` 的），作用也是格式化字符串、数字等信息。

## `console.assert ` —— 调试神器

如果你用过 Python 的话，你肯定会对 `unittest` 中形如 `assertXxxx` 的函数十分熟悉。现在，甚至有一部分灵魂跑到 JS 上了！没错，这就是 `console.assert` 。

按照惯例，先看定义：

```js
console.assert(assertion, obj1 [, obj2, ..., objN]);
console.assert(assertion, msg [, subst1, ..., substN]); // C-like message formatting
```

跟 `console.log` 差不多 —— 但是多了一个 `assertion` 。而它，就是要 assert 的对象。如果 `assertion` 的结果不为真，那么将会以类似 `console.error()` 的样式打印出后面的错误信息 `msg` 。

来看一个最简单的栗子：

```js
console.assert(![], "Yep, that's falsy.")
```

如果 `![]` 的值是非真的，那么我们将会收到一个自定义的报错：

![image-20220221205718474](https://s2.loli.net/2022/02/21/wb3uEgFGqW2mxJn.png)

那么，如果 assert 的结果是真的，就会正常执行，没有输出：

![image-20220221210046788](https://s2.loli.net/2022/02/21/qRXGbOc82KuiCTj.png)

同理，`console.assert` 也能使用 CSS：

```js
console.assert(0.1 + 0.2 === 0.3, "%cYou can't even can't get 0.1 + 0.2 right in js.", "font-weight: bold; font-style: italic; background-color: orange; color: #000")
```

![image-20220221210210114](https://s2.loli.net/2022/02/21/EFOWpIQVUxiykTS.png)

## `console.count` —— 计数神器

语法：

```js
console.count([label]);
```

`console.count` 函数接收一个字符串列表，列表中的元素表示一个标签。每次计数时，`console.count` 都会输出当前标签列表被计数的次数，并持续累积。如果没有给出任何标签，则会使用 `default` 默认标签。

这东西用起来也很简单，喂给它一些数据就行了：

```js
console.count("A");
console.count("B");
console.count("A");
```

![image-20220221211134769](https://s2.loli.net/2022/02/21/czUSn9j4vb8PEiL.png)

来做个示例：

```js
for (var i = 1; i <= 10; i++) {
	for (var j = 1; j <= i; j++) {
    	if (i % j == 0) console.count(i)
    }
}
```

这段代码会输出 1 - 10 这些数字的因数个数。

![image-20220221211731024](https://s2.loli.net/2022/02/21/FhHqOQtP3RS4p7J.png)

## `console.group` —— 没啥特别的，感觉会有用

`console.group` 允许你在 console 中输出层级嵌套的信息。

你可以使用 `console.group` 来创建一个新层，然后使用 `console.log` 、`console.warn` 、`console.error` 等函数在该层级下进行输出，最后使用 `console.groupEnd()` 来结束当前层。

示例：

```js
console.log("I'm here at the top level");
console.group("Level 2 group here!");
console.log("I'm in level 2!");
console.group("Level 3!");
console.log("You know what, [] is really weird in JS.")
console.error("0.1 + 0.2 !== 0.3 in JS =(");
console.groupEnd();
console.log("Back at level 2!");
console.groupEnd();
console.info("Wow, what a trip up there!");
```

![image-20220221212457244](https://s2.loli.net/2022/02/21/JiILZ9QAC4domM1.png)

函数太多，不放定义啦，大家应该参照运行结果就能看懂啦。

## 小结

这篇文章简单介绍了一下 `console` 的各种使用方法。但是，像一些过于普通的（例如 info、error、warning 等），我没有在这里一一介绍。

如果有小伙伴想要了解这方面的更多知识，可以前往 [MDN](https://developer.mozilla.org/en-US/docs/Web/API/console) 进行查阅，相信你一定会有新的收获。

我是 samzhangjy ，我们下期再见！

标签 javascript

标签为 javascript 的文章

Rollup.js 初体验

I built a terminal-like portfolio with Vue 3

你真的会用 console.log 吗?

Sam Zhang.