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);
    }
}

然后，更改参数类的值以覆盖原始服务：

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

使用assetic配置对我有用。

另一方面，管理Symfony应用程序资产的新推荐方法是：Webpack Encore为您提供干净利落的服务。功能强大的API，用于捆绑JavaScript模块，预处理CSS＆amp; JS和使用support for TypeScript加载器编译和缩小资产。

Answer 2

只需将其添加到tsc bin路径，就应该执行hack：）

assetic:
debug:          '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
    cssrewrite: ~
    typescript: 
        bin: "%kernel.root_dir%/../node_modules/typescript/bin/tsc --module system"

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

2 个答案: