1

tldr;

@sveltejs/adapter-static在使用延迟加载 Firebase JS SDK构建 SvelteKit 项目时，我收到以下警告9.0.0-beta.2：

[vite-plugin-svelte] The following packages did not export their 包.json file so we could not check the "svelte" field. If you had difficulties importing svelte components from a package, then please contact the author and ask them to export the package.json file. -firebase

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

更多信息

  • 火力基地：“9.0.0-beta.2”
  • @sveltejs/adapter-static: "^1.0.0-next.13",
  • @sveltejs/kit：“下一个”，

我懒惰地将 Firebase 9 (beta) 导入到 SvelteKit 项目中。我为像这样的各种 Firebase 东西公开了异步获取器......

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;
}

实际的 Firebase 导入在load/load-**.ts文件中......

//load-app.ts
import { FirebaseApp, initializeApp } from 'firebase/app';
import type { FirebaseEnvironment } from '../api';

export const loadApp = (env: FirebaseEnvironment): FirebaseApp => {
  const  app = initializeApp(env.options);
  return app;
};

// 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;
}

这按预期工作——即 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>

同样，所有这些似乎都有效，除了构建警告。我只需要更熟悉 Vite 和 SvelteKit 的人让我知道这是否是“正确的方式”（或者不是。）提前致谢！

4

1 回答 1

2

警告基本上是说，如果firebase包导出任何 svelte 组件（它没有），svelte 编译器将不会选择它并且将无法优化它。我也看到了警告，我认为没有什么可担心的。

于 2021-06-06T18:37:21.860 回答