Question

我正在尝试在Sapper中实现Firebase。我安装了模块（@ firebase / app，@ firebase / auth，@ firebase / firestore），然后编写了一个配置文件：

import firebase from '@firebase/app';
import '@firebase/firestore'
import '@firebase/auth'

const config = {
...
};

// Initialize Firebase
firebase.initializeApp(config);
export { firebase };
// Initialize db
export const db = firebase.firestore();
export const auth = firebase.auth();

当我“ npm run dev”时，我收到一条错误消息，说这些Firebase模块仅用于客户端，而不用于Node.js。

因此，我试图通过多种方式解决此问题，到目前为止，似乎唯一可行的方法是使用onMount。

  onMount(async () => {
    const {auth} = await import('../firebase/config');
    auth.signInWithEmailAndPassword("test@gmail.com", "test").then((res) => {
      // do some stuff
    })
  })

现在可以了，但是我有3个问题：

1）这是正确的方法吗？ 2）我应该从服务器端删除那些模块还是更好地保留它们？ 3）我是否应该同时使用客户端版本和服务器版本的Firebase，并使用客户端版本的Firebase来检索所有访问者和服务器端不同的所有数据？

Answer 1

我想说您很接近，但是您可以将导入保留在onMount回调中：

<script>
import { auth } from '../firebase/config';
import { onMount } from 'svelte'

onMount(() => {
    auth.signInWithEmailAndPassword("test@gmail.com", "test").then((res) => {
      // do some stuff
    })
})
</script>

如果您采用这种方式，那么您的Firebase代码将不会在SSR期间被调用，您也不必处理异步模块的加载。

话虽如此，我认为将您的Firebase代码放在服务器路由中，并从客户端调用该路由可能是一种更清洁，更有效的方法。

Answer 2

我会检查process.browser

  onMount(async () => {
    if (process.browser) {
      const {auth} = await import('../firebase/config');
      auth.signInWithEmailAndPassword("test@gmail.com", "test").then((res) => {
        // do some stuff
      })
    }
  })

或

if (process.browser) {
  onMount(async () => {
    const {auth} = await import('../firebase/config');
    auth.signInWithEmailAndPassword("test@gmail.com", "test").then((res) => {
      // do some stuff
    })
  })
}

在客户端运行某些代码的最佳方法是什么？

2 个答案: