Firebase 什么'；这是将外部库代码拆分（延迟加载）为SvelteKit项目的正确方法 太长，读不下去了

在使用

@sveltejs/adapter static

、延迟加载Firebase JS SDK

9.0.0-beta.2

构建SvelteKit项目时，我收到以下警告：

[vite plugin svelte]以下软件包未导出其

package.json

文件，因此我们无法检查“svelte”字段。如果您在从软件包导入svelte组件时遇到困难，请联系作者并要求他们导出package.json文件-firebase

在现实生活中，一切似乎都正常工作（即，在最初使用静态路由的客户端上，之后会调用Firebase API。）我需要强调这个警告吗？注意——我认为我从来没有用直接Firebase导入“污染”静态路由，但我可能完全做错了。请参阅下文了解我的方法

更多信息

• firebase：“9.0.0-beta.2”
• @sveltejs/适配器静态“^1.0.0-next.13”
• @sveltejs/kit：“下一步”

我懒散地将Firebase 9（测试版）导入到一个SvelteKit项目中。我公开了各种Firebase的异步getter，比如

import type { FirebaseApp } from 'firebase/app';
import type { Auth } from 'firebase/auth';
// etc...

// basic firebase options plus some emulator config...
import { getEnv } from './env';

let _app: FirebaseApp | null = null;
let _auth: Auth | null = null;
// etc...

export const firebaseApp = async () => {
  if (!_app) {
    const { loadApp } = await import('./load/load-app');
    _app = loadApp(getEnv());
  }
  return _app;

}

export const firebaseAuth = async (): Promise<Auth> => {
  if (!_auth) {
    const app = await firebaseApp();
    const { loadAuth } = await import('./load/load-auth');
    _auth = loadAuth(app, getEnv());
  }
  return _auth;
}

这就像预期的一样——即Vite和SvelteKit似乎可以很好地将所有内容组合起来，我可以在我的组件中执行类似的操作

<script>
// SignInForm.svelte
  // the lazy getter from above...
  import { firebaseAuth } from '$lib/firebase';
  import {
    browserLocalPersistence,
    browserSessionPersistence,
    setPersistence,
    signInWithEmailAndPassword
  } from '@firebase/auth';
  const signIn = async () => {
   try {
      const auth = await firebaseAuth();
      const cred = await signInWithEmailAndPassword(auth, ...);
      // etc...
    } catch (error) {
      // handle
    }
  };

</script>

//苗条的
//从上面偷懒的人。。。
从“$lib/firebase”导入{firebaseAuth}；
进口{
browserLocalPersistence，
browserSessionPersistence，
坚忍不拔，
使用电子邮件和密码登录
}来自'@firebase/auth'；
const signIn=async（）=>{
试一试{
const auth=wait firebaseAuth（）；
const cred=使用Email和Password（身份验证，…）等待登录；
//等等。。。
}捕获（错误）{
//处理
}
};

---

同样，除了对构建的警告之外，所有这些似乎都起到了作用。我只是需要一个更熟悉Vite和SvelteKit的人让我知道这是不是“正确的方式”（或不是）。提前谢谢

警告基本上是说，如果

firebase

包导出任何苗条组件（它不导出），苗条编译器将无法拾取它，也无法对其进行优化。我也看到了警告，我不认为有什么好担心的

// load-auth.ts
import type { FirebaseApp } from 'firebase/app';
import { getAuth, useAuthEmulator, Auth } from 'firebase/auth';
import type { FirebaseEnvironment } from '../api';


export const loadAuth  = (app: FirebaseApp, env: FirebaseEnvironment): Auth => {
  const auth = getAuth(app);
  if (
    env.emulators &&
    env.emulators.auth
  ) {
    useAuthEmulator(auth, env.emulators.auth.url, {
      disableWarnings: true
    });
  }
  return auth;
}

<script>
// SignInForm.svelte
  // the lazy getter from above...
  import { firebaseAuth } from '$lib/firebase';
  import {
    browserLocalPersistence,
    browserSessionPersistence,
    setPersistence,
    signInWithEmailAndPassword
  } from '@firebase/auth';
  const signIn = async () => {
   try {
      const auth = await firebaseAuth();
      const cred = await signInWithEmailAndPassword(auth, ...);
      // etc...
    } catch (error) {
      // handle
    }
  };

</script>