问题
I want to develop an app in Shopify. I haven't enough experience with React and Next.js but I still have to code this application.
I completed the training in this link and it works properly.
https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react
But what I want to do is different than the sample application. By using Google Puppeteer in the Shopify application, I want to take unused css codes on the Shopify site where the application is installed and create a visual structure that the user can download.
This is the code that adds unused css files on the specified site to the file containing the code:
const puppeteer = require('puppeteer');
const util = require('util');
const fs = require("fs");
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.coverage.startCSSCoverage();
await page.goto('https://kolayoto.com/'); // Change this
const css_coverage = await page.coverage.stopCSSCoverage();
console.log(util.inspect(css_coverage, { showHidden: false, depth: null }));
await browser.close();
let final_css_bytes = '';
let total_bytes = 0;
let used_bytes = 0;
for (const entry of css_coverage) {
final_css_bytes = "";
total_bytes += entry.text.length;
for (const range of entry.ranges) {
used_bytes += range.end - range.start - 1;
final_css_bytes += entry.text.slice(range.start, range.end) + '\n';
}
filename = entry.url.split('/').pop();
fs.writeFile('./'+filename, final_css_bytes, error => {
if (error) {
console.log('Error creating file:', error);
} else {
console.log('File saved');
}
});
}
})();
Since this code is a JavaScript code, I don't know how to code it with React.js and Next.js, and how to design an interface with Apollo and Polaris. As I am inexperienced in these matters, I ask you to guide me.
I am waiting for your support, thank you very much in advance.
来源:https://stackoverflow.com/questions/62095324/puppeteer-unused-code-application-in-shopify