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

【问题标题】：Bundle firebase-messaging-sw.js deps with Webpack将 firebase-messaging-sw.js 与 Webpack 捆绑在一起
【发布时间】：2017-07-19 11:12:17
【问题描述】：

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

app.js

import firebase from 'firebase'

firebase.initializeApp()

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

果然我可以去

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

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

【问题讨论】：

标签： javascript firebase webpack service-worker

【解决方案1】：

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

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

如果您有超过 1 个具有不同环境的服务工作者文件。可以是这样的

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

【讨论】：

【解决方案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 包之前分开。

【讨论】：