如何解决尝试使用puppeteer插件,但我一直收到未处理的承诺拒绝错误:ReferenceError:找不到变量:require
我的程序应该在一个名为suplexed.com的网站上搜索给定的运动鞋代码,并返回给定运动鞋可用的最小尺寸的价格。当我使用节点在控制台中运行单个.js文件时,我确实得到了我想要的值。但是,当我运行应该使用.js文件的HTML文件时,出现以下错误
Unhandled Promise Rejection: ReferenceError: Can't find variable: require
这是我的JavaScript代码,名称为“ scrapers.js”。我添加了评论以更好地理解。使用节点在控制台中运行.js文件时,没有问题。但是,当使用通过HTML的实时服务器运行目录时,该目录不起作用。这里的问题在于代码的前几行,因为它不会过去
async function scrapeStockx(url){
const site = "stockx.com";
let puppeteer = require('puppeteer-extra');
let pluginStealth = require('puppeteer-extra-plugin-stealth');
puppeteer.use(pluginStealth());
puppeteer = require('puppeteer');
const browser = await puppeteer.launch({headless: false})
const page = await browser.newPage();
await page.goto(url,{waitUntil: 'networkidle0'});
// get the value for the row sneaker size for stockx
await page.waitForXPath('//*[@id="pricer_table"]/tbody/tr[4]/td[1]');
const [sneakerSize]= await page.$x('//*[@id="pricer_table"]/tbody/tr[4]/td[1]');
const sneakerSizeTxt = await sneakerSize.getProperty('textContent');
const sneakerSizeRawTxt = await sneakerSizeTxt.jsonValue();
// get the value for the row sneaker size price for stockx
await page.waitForXPath('//*[@id="pricer_table"]/tbody/tr[4]/td[2]/span[1]');
const [sneakerPrice]= await page.$x('//*[@id="pricer_table"]/tbody/tr[4]/td[2]/span[1]');
const sneakerPriceTxt = await sneakerPrice.getProperty('textContent');
const sneakerPriceRawTxt = await sneakerPriceTxt.jsonValue();
// print the sneaker size and price to verify TO CONSOLE
console.log(printSizeAndPrices(sneakerSizeRawTxt,sneakerPriceRawTxt,site));
// print the sneaker size and price TO WEBSITE
let sneakerPrint = document.createElement("p");
sneakerPrint.textContent = printSizeAndPrice(sneakerPriceRawTxt,site)
document.querySelector("body").appendChild(sneakerPrint);
browser.close();
}
document.querySelector("#search-form").addEventListener("submit",function(e){
e.preventDefault()
// get sneaker code using the textbox created in html
// const sneakerCode = e.target.elements.enterBox.value
// manually enter a unique sneaker code
const sneakerCode = "XXXXXX-XXX";
// print sneaker code to console to verify
console.log("sneakerCode: " + sneakerCode)
// create the website address of the sneaker
const address = ('https://suplexed.com/web/' + sneakerCode)
// print website address to verify
console.log("address: " + address)
// call the function to retrieve the wanted values for the chosen sneaker
scrapeStockx(address)
})
function printSizeAndPrice(sneakerSizeRawTxt,site){
return `${sneakerSizeRawTxt} is ${sneakerPriceRawTxt} on ${site}`;
}
这是我的html代码
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Enter a sneaker code and hit the button to search</p>
<form id = "search-form">
<input type = "text" placeholder = "XXXXXX-XXX" name = "enterBox">
<button>Search</button>
</form>
<script src = "scrapers.js"></script>
</body>
</html>
解决方法
这不是解决问题的完整方法,但确实使我遇到了一个新的错误,现在我正在研究该错误。在index.html文件中,我只是在包含require.js文件的主要js标签之前添加了一个脚本标签
<script src = "require.js"></script>