将 firebase-messaging-sw.js deps 与 Webpack 捆绑在一起

Question

假设我有一个文件，我在其中初始化 Firebase 并导入其依赖项。

应用程序.js

import firebase from 'firebase'

firebase.initializeApp()

现在我也想为firebase-messaging-sw.js引用相同的依赖项，但由于它需要在根目录中，我该如何告诉 Webpack 解决这些依赖项？

果然我可以去

importScripts('https://www.gstatic.com/firebasejs/4.1.3/firebase.js')

但这会给我下载两次代码。

Answer 1

这个插件解决了我的问题。 firebase-messaging-sw.js 将在构建生产后复制到根文件夹

let config = {
  plugins: [
   ...,
    new CopyPlugin([
      {
        from: 'firebase-messaging-sw.js',
        to: 'firebase-messaging-sw.js'
      }
    ])
  ]
}

如果您有多个不同环境的 service worker 文件。 它可以是这样的

let config = {
  plugins: [
   ...,
    new CopyPlugin([
      {
        from: isProduction ? 'firebase-messaging-sw-prod.js' : 'firebase-messaging-sw.js',
        to: 'firebase-messaging-sw.js'
      }
    ])
  ]
}

Answer 2

不是 100% 清楚您要做什么，您是否试图将远程加载的脚本视为 webpack 依赖项？ Webpack 的标准模块构建假设您导入的模块都是构建时可用的本地文件。 要将远程脚本视为依赖项，我建议将其定义为 webpack 中的external依赖项： https ://webpack.js.org/configuration/externals/

在这个externals配置示例中（取自链接的文档）：

externals: {
  jquery: 'jQuery'
}

...您将使用import jquery from "jquery"引用 jquery 库（使用您在externals配置中指定的键）。 在运行时，webpack 将查找名为jQuery的全局变量（ externals配置中该键的值）。 在这种情况下，Webpack 不负责实际加载依赖项，它假定您指定的全局变量已经在运行时定义——这就是为什么它们被称为“外部”依赖项——所以你必须加载依赖项（ firebase 库）在你的 webpack 包之前分开。