@@ -4,7 +4,7 @@ title: gating
44
55<Intro >
66
7- The ` gating ` option enables conditional compilation, allowing you to control when optimized code is used at runtime.
7+ ` gating ` 选项启用条件编译,允许你控制是否在运行时使用优化代码
88
99</Intro >
1010
@@ -25,7 +25,7 @@ The `gating` option enables conditional compilation, allowing you to control whe
2525
2626### ` gating ` {/* gating* /}
2727
28- Configures runtime feature flag gating for compiled functions.
28+ 为已编译函数配置运行时特性开关的 gating。
2929
3030#### Type {/* type* /}
3131
@@ -36,28 +36,28 @@ Configures runtime feature flag gating for compiled functions.
3636} | null
3737```
3838
39- #### Default value {/* default-value* /}
39+ #### 默认值 {/* default-value* /}
4040
4141` null `
4242
4343#### Properties {/* properties* /}
4444
45- - ** ` source ` ** : Module path to import the feature flag from
46- - ** ` importSpecifierName ` ** : Name of the exported function to import
45+ - ** ` source ` ** :用于导入特性开关的模块路径
46+ - ** ` importSpecifierName ` ** :要导入的已导出函数的名字
4747
48- #### Caveats {/* caveats* /}
48+ #### 注意事项 {/* caveats* /}
4949
50- - The gating function must return a boolean
51- - Both compiled and original versions increase bundle size
52- - The import is added to every file with compiled functions
50+ - gating 函数必须返回布尔值
51+ - 同时包含编译版本与原始版本会增加包大小
52+ - 所有包含已编译函数的文件都会被添加该导入
5353
5454---
5555
56- ## Usage {/* usage* /}
56+ ## 用法 {/* usage* /}
5757
58- ### Basic feature flag setup {/* basic-setup* /}
58+ ### 基础特性开关设置 {/* basic-setup* /}
5959
60- 1 . Create a feature flag module:
60+ 1 . 创建一个特性开关模块:
6161
6262``` js
6363// src/utils/feature-flags.js
@@ -67,7 +67,7 @@ export function shouldUseCompiler() {
6767}
6868```
6969
70- 2 . Configure the compiler:
70+ 2 . 配置编译器:
7171
7272``` js
7373{
@@ -78,62 +78,62 @@ export function shouldUseCompiler() {
7878}
7979```
8080
81- 3 . The compiler generates gated code:
81+ 3 . 编译器将生成 gated 代码:
8282
8383``` js
84- // Input
84+ // 输入
8585function Button (props ) {
8686 return < button> {props .label }< / button> ;
8787}
8888
89- // Output (simplified)
89+ // 输出(简化)
9090import { shouldUseCompiler } from ' ./src/utils/feature-flags' ;
9191
9292const Button = shouldUseCompiler ()
9393 ? function Button_optimized (props ) { /* compiled version */ }
9494 : function Button_original (props ) { /* original version */ };
9595```
9696
97- Note that the gating function is evaluated once at module time, so once the JS bundle has been parsed and evaluated the choice of component stays static for the rest of the browser session.
97+ 注意, gating 函数在模块加载时只会执行一次,因此一旦 JS 包被解析并执行,组件的选择将在本次浏览器会话的剩余时间内保持不变。
9898
9999---
100100
101- ## Troubleshooting {/* troubleshooting* /}
101+ ## 故障排除 {/* troubleshooting* /}
102102
103- ### Feature flag not working {/* flag-not-working* /}
103+ ### 特性开关不起作用 {/* flag-not-working* /}
104104
105- Verify your flag module exports the correct function:
105+ 确认你的开关模块导出了正确的函数:
106106
107107``` js
108- // ❌ Wrong: Default export
108+ // ❌ 错误:默认导出
109109export default function shouldUseCompiler () {
110110 return true ;
111111}
112112
113- // ✅ Correct: Named export matching importSpecifierName
113+ // ✅ 正确:命名匹配的导出 importSpecifierName
114114export function shouldUseCompiler () {
115115 return true ;
116116}
117117```
118118
119- ### Import errors {/* import-errors* /}
119+ ### 导入错误 {/* import-errors* /}
120120
121- Ensure the source path is correct:
121+ 确保 source 路径正确:
122122
123123``` js
124- // ❌ Wrong: Relative to babel.config.js
124+ // ❌ 错误:相对于 babel.config.js
125125{
126126 source: ' ./src/flags' ,
127127 importSpecifierName: ' flag'
128128}
129129
130- // ✅ Correct: Module resolution path
130+ // ✅ 正确:模块解析路径
131131{
132132 source: ' @myapp/feature-flags' ,
133133 importSpecifierName: ' flag'
134134}
135135
136- // ✅ Also correct: Absolute path from project root
136+ // ✅ 同样正确:项目根目录的绝对路径
137137{
138138 source: ' ./src/utils/flags' ,
139139 importSpecifierName: ' flag'
0 commit comments