之前讲过ast(抽象语法树),今天再来用babel来回顾加深一下
- 需要了解js的词法分析和语法分析以及抽象语法树的转换1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859// parser 能够将一段js代码转化成astconst parser = require('@babel/parser')const traverse = require('@babel/traverse').default;const ast = parser.parse(code)// 可以构造一个ast的表达式const types = require('@babel/types')const template = require('@babel/template').defaultconst buildRequire2 = template(`const %%left%% = %%leftVal%%const %%right%% = %%rightVal%%if (%%left%% > %%right%%) {console.log('axiba')}`);const template2 = buildRequire2({left: t.identifier('aa'),leftVal: t.numericLiteral(10),right: t.identifier('bb'),rightVal: t.numericLiteral(8)})// 使用@babel/types 创建一个nodeconst newNode = t.variableDeclaration("const", [t.variableDeclarator(t.identifier('qq'), t.stringLiteral('etert'))])const expression = t.expressionStatement(t.callExpression(t.memberExpression(t.identifier('console'), t.identifier('log')), [t.numericLiteral(5)]))// 创建一个functionconst funcStatement = t.functionExpression(t.identifier('func'), [t.identifier('qqq'), t.identifier('www')], t.blockStatement([expression]))traverse(ast, {// 去掉函数里面的console.log 普通的不会去掉FunctionDeclaration(path) {path.insertBefore(template2)// 函数参数追加一个jjpath.pushContainer('params', types.identifier('jj'))// 跳过函数里面的函数path.skip();path.traverse({ExpressionStatement(path) {const expression = path.node.expression;if (types.isCallExpression(expression)) {const callee = expression.callee;if (types.isMemberExpression(callee)) {const objName = callee.object.name;const propertyName = callee.property.name;if (objName === "console" && propertyName === "log") {path.remove()}}}}})}})
更多内容参考https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md
- puppeterr初探1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556// 一个简单的爬虫(async () => {const url = 'https://www.google.com';const browser = await puppeteer.launch();const page = await browser.newPage();const search = 'input.gNO89b'const gResults = '#rso .g'await page.goto(url);await page.type('.gLFyf', 'puppeteer');await page.waitForSelector(search)const dd = await page.$(search);await page.evaluate(dd => {dd.click();}, dd)await page.waitForSelector('#rso');// Extract the results from the page.const links = await page.evaluate((gResults) => {const gs = Array.from(document.querySelectorAll(gResults));return gs.map(g => {const h3 = g.querySelector('.rc .r a h3')return h3 ? h3.textContent : '111';});}, gResults);console.log(links.join('\n'));})()// 稍微复杂一点的(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto('https://www.baidu.com/')const inner = await page.$eval('#result_logo', el => el.innerHTML)console.log('inner is', inner)// pgae监听才能打印page.on('console', msg => console.log(msg.text()));await page.exposeFunction('md5', text =>crypto.createHash('md5').update(text).digest('hex'));// page.evalueate里面的console是虚拟页面的await page.evaluate(async () => {// use window.md5 to compute hashesconst myString = 'PUPPETEER';const myHash = await window.md5(myString);console.log(`md5 of ${myString} is ${myHash}`);});await browser.close();})();
以上就是今天的全部内容 api参考https://zhaoqize.github.io/puppeteer-api-zh_CN/