小编Noo*_*ewb的帖子

我对React还是很陌生，我正在开发一个应用程序，它将获取网页的实际屏幕截图，并且该应用程序可以在所截取的屏幕截图之上绘制并添加涂鸦。最初，我使用html2canvas和domToImage拍摄客户端屏幕快照，但它无法完全呈现网页中显示的图像。

Reddit用户/ pamblam0建议我调查Google的Puppeteer。它的工作方式是启动无头铬浏览器，该浏览器转到我在本地主机上的react应用，然后轻松获取整个页面的屏幕截图。但是我的问题是，木偶戏在React应用程序中不能很好地发挥作用。它给了我一个ws错误，正如在Google搜索中所述，可以通过简单地安装ws来解决（顺便说一句不起作用）。

现在，我的操纵p脚本可以完成我的react应用程序。据我了解，它不适用于客户端应用程序（我可能错了）。我想发生的是，每当我从react应用程序中单击按钮时，puppeteer应该执行并返回base64字符串，然后将其传递到我的react应用程序中的组件。

到目前为止，这是我所做的。

puppeteerApp.js

const puppeteer = require('puppeteer');

const takeScreenshot = async () => {
    puppeteer.launch().then(async browser => {
        const page = await browser.newPage();
        const options = {
            path: 'saved_images/webshot.png',
            encoding: 'base64'
        }
        await page.goto('http://localhost:3000/', { waitUntil: 'networkidle2' });
        const elem = await page.$('iframe').then(async (iframe) => {
            return await iframe.screenshot(options)
        });

        await browser.close()
    });
}

takeScreenshot();

来自React应用的代码 App.js

import React, { Component } from 'react';
import ScreenshotsContainer from './containers/ScreenshotsContainer/ScreenshotsContainer'
import ImageContainer from './containers/ImageContainer/ImageContainer';
import html2canvas from 'html2canvas';
import …

我正在尝试重新构建一个 React 应用程序并使用 webpack 对其进行捆绑。每当我尝试运行时，npm run-script build它总是会显示 npm ERR! missing script: webpack

我尝试过的事情：

1. 删除了 node_modules 文件夹npm install（再次）
2. 全局安装了 webpack
3. 安装了 webpack-cli

您可能会注意到我使用的是某些模块的旧版本。这是因为这是一个在我受雇之前构建的遗留应用程序，现在我正在尝试将我构建的应用程序集成到这个应用程序中，但在此之前我想了解整个事情是如何作为香草工作的。

下面是我的 package.json 文件

{
  "name": "storyline-feedback-tool",
  "version": "1.1.2",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start-hot": "node server.js",
    "start": "webpack-dev-server --content-base public/ --inline --port 3001"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-polyfill": "^6.13.0",
    "classnames": "^2.2.5",
    "g": "^2.0.1",
    "lodash": "^4.15.0",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-spin": "^0.6.2",
    "webpack": "^1.15.0",
    "webpack-cli": "^3.2.3"
  }, …

我正在尝试使用 Firebase 和 TypeScript 开发一个具有身份验证的应用程序，但在调用 .auth 函数时发现错误。

悬停时显示的错误是：

类型“typeof import("e:/Projects/spectrum-test/node_modules/firebase/app/dist/app/index")'.ts(2339) 上不存在属性“auth”

这行 ( export const auth = firebase.auth();) 在 JS 中可以正常工作，但由于某种原因 TS 不喜欢它；

firebase.ts

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID
}

firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();

我已经安装了@firebase/auth-types@0.11.0，但没有解决问题

任何帮助表示赞赏。