Приложение "Неиспользуемый код кукловода" в Shopify - PullRequest
Новая
       125

Приложение "Неиспользуемый код кукловода" в Shopify

3 голосов
/ 30 мая 2020

Я хочу разработать приложение в Shopify. У меня недостаточно опыта работы с React и Next. js, но мне все еще нужно кодировать это приложение.

Я прошел обучение по этой ссылке, и оно работает правильно.

https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react

Но то, что я хочу сделать, отличается от примера приложения. Используя Google Puppeteer в приложении Shopify, я хочу взять неиспользованные css коды на сайте Shopify, где установлено приложение, и создать визуальную структуру, которую пользователь может загрузить.

Это код, который добавляет неиспользуемые файлы css на указанном сайте в файл, содержащий код: 

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');
    }
  });
}
})();

Поскольку этот код является кодом JavaScript, я не знаю, как его закодировать с React. js и Next. js, а также как разработать интерфейс с Apollo и Polaris. Поскольку я неопытен в этих вопросах, прошу вас направить меня.

Я жду вашей поддержки, заранее большое вам спасибо.

...