如何使用 SvelteKit 加载 Google API 客户端库答案

【问题标题】：How to load Google API client library with SvelteKit如何使用 SvelteKit 加载 Google API 客户端库
【发布时间】：2022-01-03 18:56:28
【问题描述】：

我是 SvelteKit 的新手，正在尝试了解如何为 Javascript 加载 Google 客户端库。

Google tells me 这样做：

<head>
    <script src="https://apis.google.com/js/api.js"></script>
    <script>
      function start() {
        // Initializes the client with the API key and the Translate API.
        gapi.client.init({
          'apiKey': 'YOUR_API_KEY',
          'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/translate/v2/rest'],
        }).then(function() {
          // Executes an API request, and returns a Promise.
          // The method name `language.translations.list` comes from the API discovery.
          return gapi.client.language.translations.list({
            q: 'hello world',
            source: 'en',
            target: 'de',
          });
        }).then(function(response) {
          console.log(response.result.data.translations[0].translatedText);
        }, function(reason) {
          console.log('Error: ' + reason.result.error.message);
        });
      };

      // Loads the JavaScript client library and invokes `start` afterwards.
      gapi.load('client', start);
    </script>
  </head>

问题是 SvelteKit 不允许页面上有 2 个或更多脚本标签（我不希望它是布局页面）。

<script src="https://apis.google.com/js/api.js"></script>
<script>
    import { onMount } from 'svelte';
    
    gapi.client.init({...
</script>

这会导致以下错误消息：

A component can only have one instance-level <script> element

由于我的目的是使用 Workbox 创建一个渐进式 Web 应用程序 (PWA)，我不想像 here 所述那样导入 Google 库，因为包含该库的包会变得太重。

知道如何加载 Google 客户端库吗？也许有一个 Workbox 方法可以做到这一点？在 Google 或 YouTube 上找不到 SvelteKit 示例。

提前致谢

【问题讨论】：

标签： google-api svelte workbox sveltekit

【解决方案1】：

svelte:head 标签允许您在加载组件时向文档头部添加资源。这个例子应该可以工作：

<script>
  const start = async () => {
    // Initializes the client with the API key and the Translate API.
    // @ts-ignore
    gapi.client.init({
      'apiKey': 'YOUR_API_KEY',
      'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/translate/v2/rest'],
    }).then(function() {
      // Executes an API request, and returns a Promise.
      // The method name `language.translations.list` comes from the API discovery.
      return gapi.client.language.translations.list({
        q: 'hello world',
        source: 'en',
        target: 'de',
      });
    }).then(function(response) {
      console.log(response.result.data.translations[0].translatedText);
    }, function(reason) {
      console.log('Error: ' + reason.result.error.message);
    });
  };

  const initializeGapi = async () => {
    gapi.load('client', start);
  }
</script>

<svelte:head>
  <script src="https://apis.google.com/js/api.js" on:load={initializeGapi}></script>
</svelte:head>

【讨论】：

感谢您的回复！进行构建时出现以下错误：“未定义'initializeGapi'”。 on:load 部分不能引用 const initializeGapi
我不确定你复制了什么。但是如果你把它插入你的 index.svelte 它运行良好。至少在我的电脑上是这样。
奇怪。必须弄清楚我这边的问题是什么。我在 index.svelte 上没有代码，但在另一个页面上，但这不应该有所作为恕我直言
我在 .svelte 文件的顶部添加了它 <script context="module"> export const ssr = false </script>