Automatically generate a skeleton screen project

“This is the 11th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021.”

Dear, hello, everyone. I am “Front-end Xiaoxin”. 😇 has been engaged in front-end development and Android development for a long time

Preface:

Following the content of the dart-Skeleton automatic skeleton screen project in the previous article, this article mainly talks about the second part of content logic.

Let’s start by abstracting a class that generates skeleton pages:

The definition is passed the options option by the constructor, and the type of the options is defined using the Ts interface.

Two functions are provided for use: Exposes the main workflow of the start method used:

1. Create a PB object (PuppeteerBrowser);

const page = await pb.open(
  this.options.url,
  this.options.emulateOpts,
  this.options.extraHTTPHeaders
);
Copy the code

2. Generate skeleton fragment HTML;

const html = await this.generateSkeletonFragment(page);
Copy the code

3. Rewrite the entry Html file;

rewriteHtml(this.options.output.injectSelector, this.filepath, html);
Copy the code

4. Close and exit the process.

await pb.close();
process.exit(0);
Copy the code

The main workflow of the private generateSkeletonFragment function:

1. Integrate the options passed in by the constructor;

// function
value: `The ${this.options.includeElement}`

// object
value: JSON.stringify({
  height: this.options.header? .height,background: this.options.header? .background, })// string
value: value
Copy the code

2. Use FS to read the JS script parsing DOM;

let scriptContent = await fs.readFileSync(
  path.resolve(__dirname, "eval-dom-scripts.js"),
  "utf8"
);
Copy the code

3. Use addScriptTag to inject script content;

await page.addScriptTag({ content: scriptContent });
Copy the code

4. Perform the parse function mounted to the window in Evaluate.

await page.evaluate((res) = > {
  // @ts-ignore
  return window.evalDOMScripts.apply(window, res);
  // @ts-ignore
}, opts)
Copy the code

We also focus on a PB class whose main function is to manipulate the Puppeteer library:

1. Use the launch function to get a browser object, and you can control whether the browser page needs to be displayed, whether devTools needs to be started, or whether execution needs to be delayed.

this.browser = await puppeteer.launch({
  headless:!this.isDebug,
  devtools: this.isDebug,
  slowMo: 5});Copy the code

2. After startup, use newPage to open a newPage.

const page = await this.browser.newPage();
Copy the code

3. We can decide whether to set the request header properties based on the actual needs of the page;

await page.setExtraHTTPHeaders(extraHTTPHeaders);
Copy the code

4. Now you can adjust the device properties of the browser, such as whether it is in a mobile phone or a PC, screen size information and so on;

emulateOpts = puppeteer.devices["iPhone 6"];
await page.emulate(emulateOpts);
Copy the code

5. The goto function is used to jump to our target URL, where we can begin parsing the DOM information for subsequent operations.

await page.goto(url, {
  timeout: 2 * 60 * 1000.waitUntil: "networkidle0"});Copy the code

Note: This project is a Ts version rewritten on the basis of DPS project, for the purpose of learning ideas to facilitate subsequent transformation.

Welcome to follow my public account “Front-end Xiaoxin students”, the first time to push original technical articles.