如何为资产的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$" 

当我尝试编译我的打字稿文件，我得到这个错误：

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语句像import { Obj } from './my-obj.model';出现这种情况。如果我不使用import语句，ts编译工作正常。

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

Answer 1

error TS6131: Cannot compile modules using option 'out' unless the '--module' flag is 'amd' or 'system'.

额外选项，tsc命令是不可能的时刻。

error TS2307: Cannot find module './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 & JS和编译和涅槃资产，support for TypeScript装载机。

Answer 2

只需将它添加到TSC bin路径，应通过AsseticBundle做黑客:)

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