前言：
承接上篇【dart-skeleton】自动生成骨架屏项目内容，这一篇主要来说一下第二块内容逻辑篇。
我们先抽象一个生成骨架页面的类(GeneratePageStructure)：
定义由构造函数传入options选项，且选项的类型使用Ts的interface进行定义。
提供两个函数供使用：公开使用的start方法的主要工作流程：
- 建立pb对象(PuppeteerBrowser)；
const page = await pb.open( this.options.url, this.options.emulateOpts, this.options.extraHTTPHeaders ); 复制代码
- 生成骨架片段html；
const html = await this.generateSkeletonFragment(page); 复制代码
- 重写入门Html文件；
rewriteHtml(this.options.output.injectSelector, this.filepath, html); 复制代码
- 关闭并退出进程。
await pb.close(); process.exit(0); 复制代码
私有的generateSkeletonFragment函数的主要工作流程：
- 整合构造函数传入的选项；
// function value: `${this.options.includeElement}` // object value: JSON.stringify({ height: this.options.header?.height, background: this.options.header?.background, }) // string value: value 复制代码
- 使用fs读取解析dom的js脚本；
let scriptContent = await fs.readFileSync( path.resolve(__dirname, "eval-dom-scripts.js"), "utf8" ); 复制代码
- 使用addScriptTag注入脚本内容；
await page.addScriptTag({ content: scriptContent }); 复制代码
- 在evaluate中执行挂载到window上的解析函数。
await page.evaluate((res) => { // @ts-ignore return window.evalDOMScripts.apply(window, res); // @ts-ignore }, opts) 复制代码
我们还重点操作了一个pb类，这个类的主要功能是对puppeteer库的操作：
- 使用launch函数启动获得一个浏览器对象，启动时可以控制是否需要显示浏览器页面，是否需要开启devtools或是否需要延缓执行；
this.browser = await puppeteer.launch({ headless: !this.isDebug, devtools: this.isDebug, slowMo: 5, }); 复制代码
- 启动后使用newPage函数打开一个新的页面；
const page = await this.browser.newPage(); 复制代码
- 我们可以根据页面的实际需要决定是否需要设置请求头属性；
await page.setExtraHTTPHeaders(extraHTTPHeaders); 复制代码
- 现在可以对浏览器的设备属性进行调整,如是否在是手机中或PC电脑中,屏幕的尺寸信息等等；
emulateOpts = puppeteer.devices["iPhone 6"]; await page.emulate(emulateOpts); 复制代码
- 通过goto函数跳转我们的目标url，至此就可以开始解析DOM信息做后续的操作了。
await page.goto(url, { timeout: 2 * 60 * 1000, waitUntil: "networkidle0",
