如何在Svelte中使用WordPress(PHP)字符串与变量，适配WooCommerce开发需求？

方案1：使用WordPress官方wp_localize_script传参（最推荐） #

这个是WordPress原生支持的前端传值标准方案，操作简单，兼容性强，不需要调整构建流程：

1. PHP端注册入队Svelte编译后的脚本，同时挂载翻译对象到全局JS变量

function wc_enqueue_configurator_assets() {
    // 注册Svelte构建输出的JS文件
    wp_register_script( 
        'wc-product-configurator', 
        get_stylesheet_directory_uri() . '/dist/configurator.js', 
        [], 
        '1.0.0', 
        true 
    );

    // 统一整理所有需要用到的翻译字符串
    $translations = [
        'my_text' => __('My text', 'domain'),
        'add_to_cart' => __('Add to cart', 'domain'),
        'config_invalid' => __('Please check your product configuration', 'domain'),
        // 后续新增翻译只需在此处添加即可
    ];

    // 将翻译对象挂载到window全局对象下，变量名可自定义
    wp_localize_script( 'wc-product-configurator', 'wcConfiguratorL10n', $translations );

    wp_enqueue_script( 'wc-product-configurator' );
}
add_action( 'wp_enqueue_scripts', 'wc_enqueue_configurator_assets' );

2. Svelte端直接读取全局变量使用即可

<script>
// 读取全局挂载的翻译对象
const l10n = window.wcConfiguratorL10n ?? {}
</script>

<div class="configurator-wrap">
    <h2>{l10n.my_text}</h2>
    <button class="submit-btn">{l10n.add_to_cart}</button>
</div>

方案2：动态拉取翻译JSON（适合翻译量极大的场景） #

如果你的配置器需要用到的翻译字符串超过上百条，不想都堆在PHP的数组里，可以用动态拉取的方案：

• PHP端注册一个简单的REST API接口，返回所有翻译字符串数组
• Svelte应用初始化时请求该接口，将返回的翻译对象存在全局状态中调用
  优势是新增翻译不需要重新构建Svelte代码，缺点是会多一次HTTP请求，小型项目性价比不高。

方案3：调整构建流程实现类PHP标签写法 #

如果习惯直接在Svelte代码里写翻译声明，可以调整构建流程实现类似效果：

1. 在Svelte代码中用统一格式的占位符写翻译，比如：

const myText = "{{__('My text', 'domain')}}"

2. 在构建工具（比如Vite/Rollup）中添加字符串替换规则，将所有{{__(.*?)}}格式的占位符替换为<?= __($1) ?>
3. 将Svelte构建输出的JS文件后缀改为.php，在文件开头添加PHP声明：

<?php header("Content-type: application/javascript; charset=utf-8"); ?>

4. PHP端入队脚本时直接填写该PHP文件的地址即可，访问时服务器会自动解析PHP标签输出对应翻译内容。

注意事项 #

所有方案都建议对输出的翻译内容做必要的转义处理，避免XSS安全风险。

内容的提问来源于stack exchange，提问作者HenrijsS