如何在express中使用具有Firebase功能的webpack-hot-server-middleware

Question

我正在尝试在服务器端使用Firebase的云功能渲染React Project.

首先,当我尝试在webpack中使用babel-watch运行快速服务器时正在运行!所以我希望能够在带有babel-watch的快速服务器中创建firebase功能,我阅读了functions-samples/isomorphic-react-app / repository并制作了以下代码.但也许我不明白..

那么,有没有使用的WebPack热-服务器中间件的方式functions.https.onRequest(app);使用babel-watch开发？

或者firebase serve --only functions,hosting在我的情况下是否正确？

服务器/ index.js

import express from "express";
import webpack from "webpack";
import webpackDevMiddleware from "webpack-dev-middleware";
import webpackHotServerMiddleware from "webpack-hot-server-middleware";
import clientConfig from "../webpack/client";
import serverConfig from "../webpack/server";

const app = express();
const compiler = webpack([clientConfig, serverConfig]);

app.use(webpackDevMiddleware(compiler));
app.use(webpackHotServerMiddleware(compiler));

export let firebaseTrigger = functions.https.onRequest(app);

的WebPack/server.js

const path = require("path");

module.exports = {
  name: "server",
  target: "node",
  entry: [path.resolve(__dirname, "../server/render.js")],
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "../functions"),
    libraryTarget: "commonjs2"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  }
};

firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "firebaseTrigger"
      }
    ]
  }
}

的package.json

{
  "name": "react-firebase",
  "version": "1.0.0",
  "main": "functions/index.js",
  "license": "MIT",
  "scripts": {
    "babel": "NODE_ENV=development babel-watch server/index.js",
    "dev-server": "firebase serve --only functions,hosting"
  },
  "dependencies": {
    "express": "^4.16.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-watch": "^2.0.7",
    "firebase-admin": "^5.8.0",
    "firebase-functions": "^0.8.0",
    "firebase-tools": "^3.16.0",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "^2.0.0",
    "webpack-hot-server-middleware": "^0.3.1"
  }
}

Answer 1

问题不在于 firebase 功能，而在于托管。

Firebase 功能在本地运行时已经包含热重载。正如您可以阅读他们的文档：https://firebase.google.com/docs/functions/local-emulator

对于这两种工具，您在活动会话期间所做的代码更改都会由模拟器自动重新加载。如果您的代码需要转译（TypeScript、React），请确保在运行模拟器之前执行此操作。

但对于托管部分，它还没有真正起作用： https://github.com/firebase/firebase-tools/issues/594