如何爲資產的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"