Telegram 小程序 | TypeScript @telegram-apps/sdk @2.x | 作用域

riyad

作用域​

此包旨在让开发者全面掌控其生命周期，包括初始化过程。因此，不提供预初始化的全局作用域；开发者必须自行配置各个作用域。

所谓作用域，指的是一组相关功能集合成的单一实体。例如，backButton 和 mainButton 就是作用域的示例。这样的设计使得 SDK 使用起来更加直观和高效。

需要注意的是，作用域以下列形式提供：

💠组件. 它们同时作为变量和函数集导出。 例如，开发人员可以使用导出的 backButton 变量或 其替代函数集：showBackButton、mountBackButton 等。

⚙️Utilities. 它们作为一组函数导出。 这些作用域是抽象的，并没有将 组合成一个变量。 例如，openLink、shareURL 等。

实际上，导出变量只是相同导出函数的组合。 因此，backButton.isMounted 和 isBackButtonMounted 本质上是同一个实体。

这里有一个例子：

1. import {
   
2.   backButton,
   
3.   hideBackButton,
   , O' ^: \- o( ?% o/ w5 j* X
4.   isBackButtonVisible,
   1 j% l) W/ q7 x6 M
5. } from '@telegram-apps/sdk';
   ( X6 v$ O0 S3 C* E+ H) r) A
6. 
   4 ^9 w3 w" m* X9 F$ ~3 v: B
7. isBackButtonVisible(); // false
   - E1 N/ ]6 d9 ~' ~
8. 
   9 R% L- {: [" I
9. backButton.show();
   
10. // backButton.isVisible and isBackButtonVisible are the same
    $ A3 |0 g+ Q" Q3 X) a2 K) v
11. // entity (signal). We can say the same about backButton.show
    
12. // and showBackButton.
    . }) d2 F7 W/ |
13. //
    1 H% n* i& Q4 i( Z
14. // backButton.isVisible() -> true
    / S; e1 y1 w. Z# ~
15. // isBackButtonVisible() -> true
    0 {& X; E% t; t' M& v
16. 
    
17. hideBackButton();
    
18. // backButton.isVisible() -> false
    
19. // isBackButtonVisible() -> false

复制代码

这里的关键区别在于最终的捆绑尺寸。 在内部，backButton 输出通过以下代码进行处理：

1. export * as backButton from 'somewhere';

复制代码

在构建应用程序时不使用软件包源代码时，bundler 更有可能 使 backButton 成为不可树状移动的对象。 因此，来自 somewhere 的所有依赖项都将被 捆绑，从而略微增加了最终捆绑包的大小（尽管不会增加很多）。
优化捆绑包让我们看看如何更有效地使用软件包：

• 只使用函数可以让捆绑程序树状分叉未使用的作用域代码。
  

+ X/ s& G0 U5 n5 M4 k' b  h

1. import { showBackButton, backButton } from '@telegram-apps/sdk';
   
2. 
   
3. showBackButton();
   ( ?* y* @' o, C% I' [3 j/ p3 v7 [5 C
4. // Only showBackButton's source code will be bundled.
     s. E2 M$ G- K) v* z; T  j
5. 
   
6. backButton.show();
   
7. // All backButton dependencies will be bundled, even
   
8. // if not used in the code: backButton.show(),
   
9. // backButton.hide(), backButton.isVisible(), etc.

复制代码

• 配置捆绑程序以使用源代码，而不是内置版本。
  

8 M" {. M3 a# J4 T

1. import { backButton } from '@telegram-apps/sdk';
   
2. 
   
3. backButton.show();
   
4. // Only backButton.show's source code will be bundled
   # V/ W! q: p8 [2 D% x
5. // because the bundler is smart enough to understand
   6 t! \! ]0 {8 W9 ~0 {0 i4 }
6. // that backButton.show is just the showBackButton
   
7. // function, so only its source code is bundled.

复制代码

下面是一个使用 resolve 选项的 Vite 配置示例：

1. import { defineConfig } from 'vite';
   
2. import { resolve } from 'node:path';
   ( j& J& r- t' e; ?( ~
3. 
   
4. export default defineConfig({
   
5.   resolve: {
   
6.     alias: {
   & f: I- \! C" R5 z# D+ K% _
7.       '@telegram-apps/sdk': resolve('node_modules/@telegram-apps/sdk/src'),
   ) ?# l8 N+ x# f4 i: |( v
8.     },
   
9.   },
   
10. });

复制代码

7 o: S5 D4 B$ Z6 e; n' z
; s6 D' {! e5 r  L3 \4 o' N/ A



% W" I8 [# o. Y1 I8 [
1 p0 O  w. |/ m