javascript - 如何为 SvelteKit/Vite 应用添加版本号？

Question

我正在尝试在我的 SvelteKit 应用程序中创建一个系统，它会在特定页面上向您显示有关当前应用程序版本的信息(最好是 Git 提交哈希和描述)。我尝试使用 Vite's define feature在构建时执行此操作，但它似乎不起作用。我该如何添加这样的内容？

这是我尝试做的一个例子:

在 svelte.config.js 中引用配置

vite: () => ({
    define: {
        '__APP_VERSION__': JSON.stringify('testfornow')
    }
})

index.svelte:

<script lang="ts">
    const version: string = __APP_VERSION__;
</script>

<p>Current App version: {version}</p>

Answer 1

这就是我设法让它工作的方式:

• 按照 SvelteKit 常见问题解答中的说明获取 package.json 数据，并将其作为常量加载到 Vite 配置中:

// svelte.config.js

import { readFileSync } from 'fs';
import { fileURLToPath } from 'url';
 
const file = fileURLToPath(new URL('package.json', import.meta.url));
const json = readFileSync(file, 'utf8');
const pkg = JSON.parse(json);

const config = {
  kit: {
    // ...
    vite: {
      define: {
        '__APP_VERSION__': JSON.stringify(pkg.version),
      }
    },
  },
  // ...
};

• 在任何 svelte 文件中使用变量:

<h2>Version: {__APP_VERSION__}</h2>

与您的示例非常相似，希望对您有所帮助!

编辑:请注意，配置在 @sveltejs/kit@1.0.0-next.359 之后发生了变化:

在对@sveltejs/kit@1.0.0-next.359 进行重大更改后，Vite 配置必须包含在其自己的文件中:

// vite.config.js

import { readFileSync } from 'fs';
import { fileURLToPath } from 'url';
 
const file = fileURLToPath(new URL('package.json', import.meta.url));
const json = readFileSync(file, 'utf8');
const pkg = JSON.parse(json);

const config = {
  define: {
    '__APP_VERSION__': JSON.stringify(pkg.version),
  }
  // ...
};

config.kit.vite 属性必须从 svelte.config.js 文件中移除。