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

riyad

作用域​

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

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

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

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

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

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

这里有一个例子：

1. import {
   % }. \0 R+ |0 `
2.   backButton,
   * W3 ?; {3 f# s" p2 H# _3 o8 X- Q
3.   hideBackButton,
   
4.   isBackButtonVisible,
   
5. } from '@telegram-apps/sdk';
   
6. 
   * E( M" H- F7 Y) e: f1 {
7. isBackButtonVisible(); // false
   7 g% G2 E3 v, k  O# K
8. 
   / d# ~, u$ x) p" `/ u/ T) U, j
9. backButton.show();
   
10. // backButton.isVisible and isBackButtonVisible are the same
    
11. // entity (signal). We can say the same about backButton.show
    
12. // and showBackButton.
    
13. //
    
14. // backButton.isVisible() -> true
    
15. // isBackButtonVisible() -> true
    9 l& V( l8 A/ l4 |( ]
16. 
    
17. hideBackButton();
    9 p3 t) g3 O  C  k
18. // backButton.isVisible() -> false
    % s: p: [9 M" `- b) u5 _
19. // isBackButtonVisible() -> false

复制代码

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

, U$ Y% H. [+ j# L# G

1. export * as backButton from 'somewhere';

复制代码

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

• 只使用函数可以让捆绑程序树状分叉未使用的作用域代码。
  ( ]4 X" W/ S9 Y" M9 V7 k6 Q

  D8 \& f( m% f: h" ^) U; n

1. import { showBackButton, backButton } from '@telegram-apps/sdk';
   
2. 
   
3. showBackButton();
   % Q* L2 d0 K/ e  p& o9 c
4. // Only showBackButton's source code will be bundled.
   2 U: D3 l- {! g  T( }( M
5. 
   ' i2 f0 h6 x- d, ]  [1 u! z# |  o
6. backButton.show();
   0 }- q( J7 T, y* r) U& r
7. // All backButton dependencies will be bundled, even
   
8. // if not used in the code: backButton.show(),
   ' J. k/ {3 i, j; u/ v7 x- e" w3 |
9. // backButton.hide(), backButton.isVisible(), etc.

复制代码

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

1. import { backButton } from '@telegram-apps/sdk';
   
2. 
   4 b* Z5 J4 {  u
3. backButton.show();
   
4. // Only backButton.show's source code will be bundled
   ! w% U! g, V8 j& @; s. C
5. // because the bundler is smart enough to understand
   + \9 D9 Y8 n4 x" j5 p4 e3 Q" C
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';
   $ M  N% [+ F* U
3. 
   
4. export default defineConfig({
   
5.   resolve: {
   2 `: F' g  @! C8 [& H
6.     alias: {
   
7.       '@telegram-apps/sdk': resolve('node_modules/@telegram-apps/sdk/src'),
   
8.     },
   
9.   },
   0 W: H- r: V4 K( i
10. });

复制代码

. J3 K% o+ i# k9 U


, Z% g: |& W4 F7 Q

: s" i3 E; U; C9 v5 X' W

% `. C& Z9 R3 }% o5 n9 r% \" j