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,
   - M; J% O- @; n3 W  Y4 t  F
4.   isBackButtonVisible,
   , ]  _/ b5 F' b3 [% r8 X2 W
5. } from '@telegram-apps/sdk';
   
6. 
   
7. isBackButtonVisible(); // false
   9 g2 r! g7 `4 `
8. 
   
9. backButton.show();
   
10. // backButton.isVisible and isBackButtonVisible are the same
    8 o1 D- `6 ?2 K" q
11. // entity (signal). We can say the same about backButton.show
    & _4 J( V  l: C
12. // and showBackButton.
    
13. //
    - P" M5 m# o# T" T8 h1 L$ w. R# }5 }
14. // backButton.isVisible() -> true
    1 ]& Z1 Z+ L' M1 o8 U
15. // isBackButtonVisible() -> true
    
16. 
    
17. hideBackButton();
    / q/ m& v1 V' O, f1 i
18. // backButton.isVisible() -> false
    
19. // isBackButtonVisible() -> false

复制代码

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

; m( n! \  i% k3 P! x

1. export * as backButton from 'somewhere';

复制代码

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

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

1. import { showBackButton, backButton } from '@telegram-apps/sdk';
   7 m2 `( @# m- i. a9 T
2. 
   
3. showBackButton();
   
4. // Only showBackButton's source code will be bundled.
   
5. 
   
6. backButton.show();
   
7. // All backButton dependencies will be bundled, even
   % p* x- Q) a. k6 Z% I4 p+ _# _0 c
8. // if not used in the code: backButton.show(),
   7 G7 _; }! f' G% B+ O, Y
9. // backButton.hide(), backButton.isVisible(), etc.

复制代码

• 配置捆绑程序以使用源代码，而不是内置版本。
  / }4 n# q- ]2 w2 u$ m  `) N/ z' M

1. import { backButton } from '@telegram-apps/sdk';
   9 q/ I/ X7 O) ~( e, y# ]& Q
2. 
   
3. backButton.show();
   ( o! o8 g& M/ M# {: @
4. // Only backButton.show's source code will be bundled
   
5. // because the bundler is smart enough to understand
   ) y# }% I  A, e. p
6. // that backButton.show is just the showBackButton
   
7. // function, so only its source code is bundled.

复制代码

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

* O3 O4 W7 Q$ U; d; i- ]  R# T

1. import { defineConfig } from 'vite';
   
2. import { resolve } from 'node:path';
   : Y* H/ W6 e/ {" Z" B2 a
3. 
   
4. export default defineConfig({
   , a2 Y" N* F/ {  X- f' ~
5.   resolve: {
   
6.     alias: {
   " R! R( t6 M9 N, E* \  O
7.       '@telegram-apps/sdk': resolve('node_modules/@telegram-apps/sdk/src'),
   
8.     },
   
9.   },
   9 A4 x3 v4 E, ?" X; Q) Y
10. });

复制代码

0 w7 ^+ _& W: U& {$ w$ K4 C