type
status
date
summary
tags
category
icon
阅读源码如何不配合本地debugger，效果可能不尽人意。debugger可帮助我们更好的理解代码的执行逻辑，尤其是代码中包含大量的继承、回调等写法。本文介绍我是如何在本地启动Quill.js项目。
启动项目
- 从GitHub拉去Quill.js项目代码；
- 使用
npm安装项目依赖；
- 使用
npm run start:webpack构建代码仓库；
- 浏览器中访问 http://localhost:9080/，可以看到有构建的 JS 文件；
- 在
dist目录中新增一个 html 文件：
- 访问 http://localhost:9080/editor.html 即可看到效果了：
替换 Parchment 为本地文件
默认 Parchment 是使用 npm 包形式，代码被构建过，可阅读性不太好。为了阅读方便，我将 Parchment大源码拷贝到项目的根目录下面：
- 从
node_modules中找到 parchment 这个包，复制其 src 目录，在项目的根目录粘贴；
- 修改 Webpack 的配置
_develop/webpack.config.js文件，通过别名替换 npm 包为源码，具体修改包含两个地方： - 第 19 行的
source变量添加parchment目录，使得parchment目录中的文件也会被 babel编译； - 第 78 行的
resolve中添加一个别名，让parchment指向我们拷贝的源码：
重新启动一下项目，就可愉快的调试源码了。
TypeScript 别名设置
如果在VSCode中点击某一个parchment中的定义的类型，会自动跳转到 node_modules 中的文件，可以设置一个别名方便跳转，修改
tsconfig.json 文件，添加一个 paths 配置：