Symfony 的 TypeScript 扩展包

安装

安装扩展包

1

$ composer require sensiolabs/typescript-bundle

用法

首先设置 sensiolabs_typescript.source_dir 选项到您的 TypeScript 文件所在位置的列表。

例如，如果您的 TypeScript 代码位于 assets/typescript/ 目录中，并有一个 assets/typescript/app.ts 入口点文件，请像这样设置选项

1
2
3

# config/packages/asset_mapper.yaml
sensiolabs_typescript:
    source_dir: ['%kernel.project_dir%/assets/typescript']

然后在您的模板中加载您的 TypeScript 文件

1
2
3
4
5

{# templates/base.html.twig #}

{% block javascripts %}
    <script type="text/javascript" src="{{ asset('typescript/app.ts') }}"></script>
{% endblock %}

最后运行此命令

1
2
3
4
5

# to compile only the TypeScript files
$ php bin/console typescript:build --watch

# to compile ALL your assets
$ php bin/console asset-map:compile

就是这样！

1
2
3
4
5

# .symfony.local.yaml
workers:
    # ...
    typescript:
        cmd: ['symfony', 'console', 'typescript:build', '--watch']

它是如何工作的？

首次运行 TypeScript 命令之一时，扩展包会将适用于您系统的正确 SWC 二进制文件下载到 var/ 目录中。

当您运行 typescript:build 时，该二进制文件用于将 TypeScript 文件编译到 var/typescript/ 目录中。最后，当请求 assets/typescript/app.ts 的内容时，扩展包会将该文件的内容与 var/typescript/ 目录的内容交换。

配置

要查看此扩展包的完整配置，请运行

1

$ php bin/console config:dump sensiolabs_typescript

主要选项是 source_dir，默认为 [%kernel.project_dir%/assets]。这是将要编译的目录数组。

使用不同的二进制文件

此扩展包已经为您安装了正确的 SWC 二进制文件。但是，如果您已经在您的机器上安装了 SWC 二进制文件，您可以指示扩展包使用 swc_binary 选项来使用该二进制文件

1
2
3

# config/packages/asset_mapper.yaml
sensiolabs_typescript:
    swc_binary: 'node_modules/.bin/swc'

默认情况下，扩展包使用 SWC v1.3.92。但是，如果您需要较新的功能或错误修复，您可以指定不同的 SWC 版本来编译您的代码库

1
2
3

# config/packages/sensiolabs_typescript.yaml
sensiolabs_typescript:
    swc_version: v1.7.27-nightly-20240911.1

请注意，在切换 swc_version 后，您应该删除下载目录（默认情况下为 var）中现有的 SWC 二进制文件；仅当在下载目录中找不到二进制文件时，才会触发下载。否则，仍将使用现有的二进制文件。

配置编译器

您可以通过将 swc_config_file 选项设置为您的 .swcrc 文件的路径来配置 SWC 编译器

1
2
3

# config/packages/asset_mapper.yaml
sensiolabs_typescript:
    swc_config_file: '%kernel.project_dir%/.swcrc'