6

我正在开始一个新项目，尽管使用完整的 firebase 模拟器套件会很好。

这是我认为可行的方法：

// THIS IS MY package.json SCRIPT

"start-firebase-build": "set NODE_ENV=development_firebase&& webpack --config webpack.config.js",

webpack.config.js

该 webpack 配置将执行以下操作：

if (DEVELOPMENT_FIREBASE) {
  
  const DEV_PLUGINS = [
    new webpack.HotModuleReplacementPlugin(),             // ENABLE HMR
    new webpack.HashedModuleIdsPlugin()                   // INCLUDE HASH IN MODULE IDS AND FILENAMES
  ];
  const PLUGINS = config.plugins.concat(DEV_PLUGINS);     // MERGE COMMON AND DEV PLUGINS

  config = {
    ...config,
    watch: true,
    mode: "development",
    devtool: "inline-source-map",
    plugins: PLUGINS,
    output: {
      filename: "[name].[hash:5].js",
      path: path.resolve(__dirname, "public"),           // OUTPUT FILES WILL BE IN /public
      publicPath: "/"
    },
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        ["react-dom"]: "@hot-loader/react-dom"
      }
    }
  };
}

firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": "npm --prefix \"$RESOURCE_DIR\" run build"
  },
  "hosting": {
    "public": "public",                     // <---- SERVING FILES FROM /public
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/app.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  },
  "emulators": {
    "functions": {
      "port": 5001
    },
    "firestore": {
      "port": 8080
    },
    "hosting": {
      "port": 5000
    },
    "ui": {
      "enabled": true
    }
  }
}

所以我打开了两个终端，我做了以下事情：

1号航站楼

npm run start-firebase-build

// THIS WILL RUN THE BUILD FOR FIREBASE IN /public IN WATCH MODE (SO IT CAN BE HOT RELOADED)

2号航站楼

firebase emulators:start

// START ALL FIREBASE EMULATORS

结果：

一切正常。但我没有得到 HMR。从脚本日志中我可以看到，Webpack 正在做它的事情（关于重新加载模块），但我必须刷新页面才能让 Firebase 获得新的捆绑包版本。

问题

是否可以使用 firebase 托管模拟器进行开发，并且在更改前端代码时仍然会进行热重载？

我的意思是，如果这是不可能的，解决方案可能只是使用模拟器，同时仍firestore用作“托管服务提供商”，但我与.functionswebpack-dev-serverfirebase.json

想象一下，我有一个buildSitemap响应 URL 的云函数/sitemap.xml。该信息存储在firebase.json其中，重写由 Firebase 托管完成。

firebase.json

"rewrites": [
  {
    "source": "/sitemap.xml",
    "function": "buildSitemap"
  },
]

人们通常如何处理这个问题？

4

0 回答 0