javascript - 在 React Boilerplate 中使用 firebase-messaging-sw.js 中的环境变量

Question

这是我的 firebase-messaging-sw.js 文件。我需要的是从我的 .env 文件中获取环境变量。无论是直接的还是间接的。我在这里尝试了其他可用的答案，但无济于事。我正在使用 React 样板文件，而这些答案与我不符。有没有办法让我拿到这些？任何帮助，将不胜感激。
现在代码:

 importScripts(`https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js`)
 importScripts(`https://www.gstatic.com/firebasejs/7.17.1/firebase-messaging.js`)
    
    firebase.initializeApp({
        apiKey: `AIz.....Cvg5E_Q`,
        authDomain: `example.firebaseapp.com`,
        databaseURL: `https://example.firebaseio.com`,
        projectId: `projectid`,
        storageBucket: `example.com`,
        messagingSenderId: `1...7`,
        appId: `1..............30`,
    })

首选方法是从 .env 或某个变量访问它。通过导入或其他方式。 附: Imports 和 require 在这个 service worker 中不起作用。

 importScripts(`https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js`)
 importScripts(`https://www.gstatic.com/firebasejs/7.17.1/firebase-messaging.js`)
    
    firebase.initializeApp(firebaseConfig)

Answer 1

我提交了一个答案来解决这个问题 here .总之，您需要:

创建 2 .env文件

创建 firebase-messaging-sw.js 中的文件根文件夹 使用你的环境变量

安装 cra-append-sw

添加 pre脚本到您的package.json

查看 my other answer对于实现细节。