如何为assetic的TypeScript过滤器指定tsconfig.json？

Question

我正在使用Symfony 3.3和资产包.我在config.yml中有这个:

assetic:
    debug:          '%kernel.debug%'
    use_controller: '%kernel.debug%'
    filters:
        cssrewrite: ~
        typescript: 
            bin: "%kernel.root_dir%/../node_modules/typescript/bin/tsc"
            apply_to: "\\.ts$"

当我尝试编译我的TypeScript文件时,我收到此错误:

Output:
../../../../private/var/folders/94/45yn02792ksfglm12pjxxlp00000gn/T/assetic_typescript_in59bccf08e6357/my-form.ts.ts(6,1): error TS6131: Cannot compile modules using option 'out' unless the '--module' flag is 'amd' or 'system'.
../../../../private/var/folders/94/45yn02792ksfglm12pjxxlp00000gn/T/assetic_typescript_in59bccf08e6357/my-form.ts.ts(6,22): error TS2307: Cannot find module './my-obj.model'.

这在我使用像这样的导入语句后发生import { Obj } from './my-obj.model';.如果我不使用import语句,ts编译工作正常.

如何添加资产的TypeScript过滤器--module system参数或tsconfig.json？

Answer 1

错误 TS6131：无法使用选项“out”编译模块，除非“--module”标志是“amd”或“system”。

目前无法提供额外的tsc命令选项。AsseticBundle

错误 TS2307：找不到模块“./model”。

此处AsseticBundle将每个单独的ts文件保存到 tmp 目录/文件中进行编译，因此它也不支持此功能。

好消息是您可以覆盖服务的行为assetic.filter.typescript来修复它。让我们将此类添加到应用程序中：

namespace AppBundle\Assetic\Filter;

use Assetic\Asset\AssetInterface;
use Assetic\Exception\FilterException;
use Assetic\Util\FilesystemUtils;

class TypeScriptFilter extends \Assetic\Filter\TypeScriptFilter
{
    private $tscBin;
    private $nodeBin;

    public function __construct($tscBin = '/usr/bin/tsc', $nodeBin = null)
    {
        $this->tscBin = $tscBin;
        $this->nodeBin = $nodeBin;
    }

    public function filterLoad(AssetInterface $asset)
    {
        $pb = $this->createProcessBuilder($this->nodeBin
            ? array($this->nodeBin, $this->tscBin)
            : array($this->tscBin));

        // using source path to compile and allow "imports".
        $inputPath = $asset->getSourceRoot().DIRECTORY_SEPARATOR.$asset->getSourcePath();
        $outputPath = FilesystemUtils::createTemporaryFile('typescript_out');

        $pb
            ->add($inputPath)
            // passing the required options here
            ->add('--module')->add('system')
            ->add('--out')
            ->add($outputPath)
        ;

        $proc = $pb->getProcess();
        $code = $proc->run();

        if (0 !== $code) {
            if (file_exists($outputPath)) {
                unlink($outputPath);
            }
            throw FilterException::fromProcess($proc)->setInput($asset->getContent());
        }

        if (!file_exists($outputPath)) {
            throw new \RuntimeException('Error creating output file.');
        }

        $compiledJs = file_get_contents($outputPath);
        unlink($outputPath);

        $asset->setContent($compiledJs);
    }
}

然后，更改参数class的值来覆盖原来的服务：

# app/config/services.yml
parameters:
    assetic.filter.typescript.class: 'AppBundle\Assetic\Filter\TypeScriptFilter'

它对我来说适用于你的assetic配置。

另一方面，管理 Symfony 应用程序资产的新推荐方法：Webpack Encore为您提供了一个干净而强大的 API，用于捆绑 JavaScript 模块、预处理 CSS 和 JS 以及编译和缩小资产，并支持 TypeScript加载器。