firebase - 如何仅在 Sapper 的客户端上导入 Firebase？-6ren

firebase - 如何仅在 Sapper 的客户端上导入 Firebase？

转载作者：行者123 更新时间：2023-12-04 06:52:36

我正在将 Firebase 导入到我的 Sapper 应用程序中，我不希望在服务器上评估导入。如何确保导入仅在客户端？

我正在使用 Sapper 运行 sapper export生成静态文件。我试过了:

在自己的文件中创建 firebase 实例并导出 firebase.auth()和 firebase.firestore()模块。

尝试调整 rollup.config.js 以不同方式解决依赖关系，如下面的错误消息所示。这带来了更多的头痛。

在 client.js 中创建 Firebase 实例.不成功。

在 stores.js 中创建实例.不成功。

声明变量并在 onMount() 中赋值.这导致我必须在不同的 block 范围内工作。感觉有点hacky。

应用程序的初始化工作正常:

import firebase from 'firebase/app'

const config = {...}

firebase.initializeApp(config);

我还发现，如果我将导入更改为 import firebase from 'firebase'我没有收到此服务器错误:

 @firebase/app:
Warning: This is a browser-targeted Firebase bundle but it appears it is being run in a Node environment.  If running in a Node environment, make sure you are using the bundle specified by the "main" field in package.json.

If you are using Webpack, you can specify "main" as the first item in
"resolve.mainFields": https://webpack.js.org/configuration/resolve/#resolvemainfields

If using Rollup, use the rollup-plugin-node-resolve plugin and set "module" to false and "main" to true: https://github.com/rollup/rollup-plugin-node-resolve

我希望只从文件中导出这些 firebase 功能并将它们导入到我的组件中，例如:

<script>
  import { auth } from "../firebase";
</script>

但是一旦包含该导入，开发服务器就会崩溃。我不想在服务器上使用它，因为我只是生成静态文件。

有人对如何仅在客户端实现导入有一些想法吗？

最佳答案

所以我在这方面花了太多时间。没有比 onMOunt 更优雅的解决方案了。

但是，我确实意识到 sapper 确实应该用于它的 SSR 功能。我写了一篇关于如何使用 Sapper SSR 和 Cloud Functions 在 Firebase 上进行设置的文章:

https://dev.to/eckhardtd/how-to-host-a-sapper-js-ssr-app-on-firebase-hmb

原始问题的另一个解决方案是通过 src/template.html 将 Firebase CDN 置于全局范围内。文件。

<body>
    <!-- The application will be rendered inside this element,
         because `app/client.js` references it -->
    <div id='sapper'>%sapper.html%</div>

    <!-- Sapper creates a <script> tag containing `app/client.js`
         and anything else it needs to hydrate the app and
         initialise the router -->
    %sapper.scripts%
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-firestore.js"></script>
</body>
</html>

在组件中:

<script>
import { onMount } from 'svelte';
let database, authentication;

onMount(() => {
  database = firebase.firestore();
  authentication = firebase.auth();
});

const authHandler = () => {
  if (process.browser) {
    authentication
    .createUserWithEmailAndPassword()
    .catch(e => console.error(e));
  }
}
</script>

<button on:click={authHandler}>Sign up</button>

关于firebase - 如何仅在 Sapper 的客户端上导入 Firebase？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56315901/

文章推荐： sql-server-2005 - 报告错误时记录 SQL Server 调用堆栈

文章推荐： floating-point - IEEE "double"的精确文本表示

文章推荐： iptables - 删除某些数据包上的数据包标记

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

firebase - 如何仅在 Sapper 的客户端上导入 Firebase？