Как включить горячую перезагрузку при использовании Webpack в режиме просмотра и эмуляторов Firebase: начало - PullRequest
Новая
       92

Как включить горячую перезагрузку при использовании Webpack в режиме просмотра и эмуляторов Firebase: начало

1 голос
/ 04 августа 2020

Я начинаю новый проект, и я подумал, что было бы неплохо использовать полный пакет эмуляторов 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 делает свое дело (в отношении перезагрузки модулей), но мне нужно обновить sh страницу, чтобы Firebase получила новую версию пакета.

ВОПРОС

Можно ли при разработке с использованием эмулятора хостинга firebase получать горячую перезагрузку при внесении изменений во внешний код?

То есть, если это не так возможно, решением этой проблемы может быть просто использование эмуляторов firestore и functions, при этом webpack-dev-server все еще используется в качестве «хостинг-провайдера», но я как бы «теряю связь» с настройками хостинга из firebase.json.

Представьте, что у меня есть облачная функция buildSitemap, которая отвечает на URL /sitemap.xml. Эта информация хранится в firebase.json, и эта перезапись выполняется хостингом Firebase.

firebase. json

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

Как люди обычно с этим справляются?

...