运行一些纯代码客户端的最佳方式是什么？ [英] What's the best way to run some code only client side?

问题描述

我正在尝试在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("[e-mail]", "test").then((res) => {
      // do some stuff
    })
  })

现在它起作用了，但我有三个问题：

这条路对吗？ 2)我是应该从服务器端移除这些模块，还是还是保留它们更好？ 3)我是否应该同时使用客户端和服务器端版本的Firebase，并使用客户端版本来检索对于每个访问者和服务器端不同的所有数据，以共享所有数据？

推荐答案

我要检查process.browser

  onMount(async () => {
    if (process.browser) {
      const {auth} = await import('../firebase/config');
      auth.signInWithEmailAndPassword("[e-mail]", "test").then((res) => {
        // do some stuff
      })
    }
  })

或

if (process.browser) {
  onMount(async () => {
    const {auth} = await import('../firebase/config');
    auth.signInWithEmailAndPassword("[e-mail]", "test").then((res) => {
      // do some stuff
    })
  })
}

这篇关于运行一些纯代码客户端的最佳方式是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！