使用Webpack打包firebase-messaging-sw.js依赖项

Question

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

app.js

import firebase from 'firebase'

firebase.initializeApp()

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

当然，我可以使用

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

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

- PascalAOMS

Answer 1

该插件解决了我的问题。在构建生产环境后，firebase-messaging-sw.js 将被复制到根目录下。

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

如果您有不止一个带有不同环境的服务工作器文件，可能会是这样的：

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

- Quy Nguyen

---

我收到了一个错误提示，上面写着“'must NOT have additional properties. (to)”。 - Naeem Ahmad

Answer 2

不是很清楚你想做什么，你是想把一个远程加载的脚本当作 webpack 的依赖来处理吗？Webpack 的标准模块构建假定你导入的模块都是在构建时可用的本地文件。要将远程脚本视为依赖项，我建议在 webpack 中将其定义为external 依赖项：https://webpack.js.org/configuration/externals/

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

externals: {
  jquery: 'jQuery'
}

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

- Brendan Gannon