原来rollup这么简单之 rollup.generate + rollup.write篇 (4)

根据chunk类型进行不同的处理,assets直接获取代码即可,chunks的话还需根据sourcemap选项将sourcemp追加到代码之后。

if (outputFile.type === 'asset') { source = outputFile.source; } else { source = outputFile.code; if (outputOptions.sourcemap && outputFile.map) { let url: string; if (outputOptions.sourcemap === 'inline') { url = outputFile.map.toUrl(); } else { url = `${basename(outputFile.fileName)}.map`; writeSourceMapPromise = writeFile(`${fileName}.map`, outputFile.map.toString()); } if (outputOptions.sourcemap !== 'hidden') { source += `//# ${SOURCEMAPPING_URL}=${url}\n`; } } }

最后调用fs模块进行文件创建和内容写入即可

function writeFile(dest: string, data: string | Buffer) { return new Promise<void>((fulfil, reject) => { mkdirpath(dest); fs.writeFile(dest, data, err => { if (err) { reject(err); } else { fulfil(); } }); }); }

以上就是代码流程的解析部分,具体细节参考代码库注释

部分功能的具体解析

总结

随着深入阅读发现rollup细节操作很多,很复杂,需要话更多的时间去打磨,暂时先分析了下主流程,具体的实现细节比如优化chunks、prerender等之后视情况再说吧。

不过也学到了一些东西,rollup将所有的ast类型分成了一个个的类,一个类专门处理一个ast类型,调用的时候只需要遍历ast body,获取每一项的类型,然后动态调用就可以了,很使用。对于ast没有画面感的同学可以看这里 => ast在线解析

rollup从构建到打包,经历了三个大步骤:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zywwgw.html