如何调试rollup源码

183 阅读1分钟

1. 拉取代码

bash

git clone https://github.com/rollup/rollup.git

2. 安装依赖

bash

npm install

运行命令后会自动打包生成dist目录。

如果不成功,有如下错误:

preferring built-in module 'events' over local alternative

则需要修改rollup.config.ts文件

image.png

3. 添加--inspect-brk

rollup目录中找到dist/bin/rollup文件,在第一行中添加--inspect-brk后缀。

javascript

// 添加前
#!/usr/bin/env node
// 添加后
#!/usr/bin/env node --inspect-brk

如下所示:

dist目录

4. 建立rollup软连接

rollup目录中执行yarn link建立rollup的软连接。

bash

cd rollup
npm link

5. 使用rollup

新建一个工程目录,比如study-rollup(可以自己随意起名),然后链接rollup

bash

# 进入 study-rollup 目录
cd study-rollup
npm link rollup

6. 运行

在终端中运行rollup命令(也可以在package.jsonscripts中定义命令)。

bash

# 进入 study-rollup 目录
cd study-rollup
rollup -c

运行后会出现一个ws:开头的url

调试地址

7. 浏览器调试

在浏览器中打开调试页面chrome://inspect

chrome-inspect调试.png

点击该链接,会弹出一个窗口,找到Sources选项,通过Add folder to workspace将我们前面下载好的rollup包导入进来,然后找到rollup的源码入口,打上断点,就可以调试了。

rollup调试.png