# 让代码飞一会

子曰:欲调代码必使之飞也;必须让代码可以调试,才能尽快的渗透到代码中。在生成的 <dist> 目录中,有 zrender.jszrender.js.map 。可以创建一个 example 文件,引用到 zrender.js ,调试的时候可以通过 zrender.js.map 映射到源码中。

# 创建 example.html

在根目录中创建 example.html 然后 js 引用到 dist/zrender.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="zrender_container" style="width:600px;height:500px;"></div>
    <script src="./dist/zrender.js"></script>
    <script>
        var zr = zrender.init(document.getElementById('zrender_container'));
    </script>
</body>
</html>

# 启用开发模式

启用 scripts 中的 dev 命令,进入开发模式,实际上是利用了 rollupwatch 方法

$ yarn dev
yarn run v1.21.0
$ node build/build.js --watch
[2020-5-29 13:42:05] build bundle start
[2020-5-29 13:42:07] build bundle end
Created D:\sunbt\zrender\dist\zrender.js in 1694 ms.

# 向世界问好

现在我们可以在 src 中的文件中进行代码修改等操作。

// src/zrender.js

export function init(dom, opts) {
    // 在这里可以生成数据日志,以及断点等
    console.log('轻轻的我走了,正如我轻轻的来,我挥一挥衣袖,不带走一片云彩');

    var zr = new ZRender(guid(), dom, opts);
    instances[zr.id] = zr;
    return zr;
}

在查看 example.html 时,控制台输出了下面的字样:

轻轻的我走了,正如我轻轻的来,我挥一挥衣袖,不带走一片云彩

zrender.js:44

# 小结

那么准备活动就此结束了,下面就要开始看代码了