Rollup 调试源码

准备工作

下载源码

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

下载依赖

npm install

生成dist，rollup 打包是使用 rollup

npm build

到这里会发现 rollup 其实是默认生成 sourceamap，所以很方便的调用。

原因是rollup.config.js，这里是默认开启了source

output: {
    banner: getBanner,
    chunkFileNames: 'shared/[name].js',
    dir: 'dist',
    entryFileNames: '[name]',
    exports: 'named',
    externalLiveBindings: false,
    format: 'cjs',
    freeze: false,
    generatedCode: 'es2015',
    interop: 'default',
    sourcemap: true
},

调式项目需要做的工作

调式项目这个不做demo，就是一般的通过的 rollup 打包的项目，需要注意的是这里只是调式了打包后的代码。

新建 .vscode/launch.json

{
	"version": "0.2.0",
	"configurations": [
		{
			"type": "node",
			"request": "launch",
			"name": "Debug Rollup",
			"program": "${workspaceFolder}/node_modules/rollup/dist/bin/rollup.js",
			"args": ["-c", "rollup.config.js","--environment","NODE_ENV:production","--bundleConfigAsCjs"],
			"cwd": "${workspaceFolder}",
			"console": "integratedTerminal",
			"sourceMaps": true,
			"skipFiles": [
				"<node_internals>/**"
			],
			"resolveSourceMapLocations":[
				"${workspaceFolder}/**",
				"${workspaceFolder}/node_modules/*",
				"${workspaceFolder}/*",
			],
		}
	]
}

通过 npm link 将刚刚下载的的包软链接到调式项目中

npm link // rollup 项目
npm link rollup // 调式项目

使用 vscode 调试即可。

其他的方式

• 通过浏览器去打断点，这种方式可以查看到未打包的源码。
• 直接在下载下来的 rollup 项目打断点，使用以上配置即可。

总结

rollup 打包其实是使用的 dist/bin/rollup 脚本，这是入口

当调式模式执行 "program": "${workspaceFolder}/node_modules/rollup/dist/bin/rollup", 把参数带上 "args": ["-c", "rollup.config.js","--environment","NODE_ENV:production","--bundleConfigAsCjs"]

接着在执行代码 debugger 就可以调式源码了。

遗留问题，按照我这种方式理应能够调式到源码才对的，但是 vscode 加载不了 sourcemap 这个原因没有找到，不过在 rollup 项目打包后的代码阅读更方便一些，所以也没有纠结了。