typescriptをコンパイルしてJavaScriptファイル用のマップを作成するgruntタスクを作成するには

Question

私はGrunt、Typescript、Webpack、およびローダーを初めて使いました。これらのツールのドキュメントを理解しようとしています。便利ですが、ts-loaderはこのチュートリアルhttp://www.jbrantly.com/typescript-and-webpack/を参照していますが、これは参考にされていますが、私が必要とするものではありません。

私たちのプロジェクトでは、JavasCriptとJSXだけでなく、Typescriptを使用しています。grunt tsタスクを使用して、ソースコードを含むtypescriptをjavascriptにコンパイルしています。 javascriptは最終的に一緒にコンパイルされ、最終的に最小ファイルと対応するソースマップファイルが生成されるように圧縮されます。残念なことに、ソースマップは最終製品にタイプスクリプトのJavaScriptを含むことはありません。これは、本番環境からタイプスクリプトで作成されたjavascriptソースファイルを見ることができないためです。通常のjavascriptファイルのみ。

gruntファイルの既存のwebpackタスクを変更して、tsコンパイラの代わりにts-loaderを使用してコンパイルし、マップを縮小して提供できると考えました。 ts-loaderがコンパイルして必要なマップを生成することを期待しています。

既存の面倒なタスクが

webpack: { 
     options: { 
      entry: webpackEntry, 
      output: { 
       path: webpackDest, 
       filename: 'our-react-min.js', 
       library: ["LIB", "apps"], 
       libraryTarget: "assign", 
       pathInfo: true 
      }, 
      externals: grunt.file.readJSON('our-ui/webpack-externals.json'), 
      stats: { 
       // Configure the console output 
       colors: true, 
       modules: false, 
       reasons: true 
      }, 
      progress: true 
     }, 
     prod: { 
      stats: { 
       colors: false, 
       modules: true, 
       reasons: true 
      }, 
      plugins: [ 
       new webpack.optimize.UglifyJsPlugin(), 
       new webpack.optimize.OccurenceOrderPlugin(), 
       new webpack.optimize.DedupePlugin() 
      ] 
     }, 
     dev: { 
      debug: true, 
      devtool: 'inline-source-map', 
      cache: true 
     } 
    }, ... 

だったと私は今、この中にそれを回しました：

 webpack: { 
     options: { 
      entry: webpackEntry, 
      output: { 
       path: webpackDest, 
       filename: 'our-react-min.js', 
       library: ["LIB", "apps"], 
       libraryTarget: "assign", 
       pathInfo: true 
      }, 
      resolve: { 
       // Add `.ts` and `.tsx` as a resolvable extension. 
       extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'] 
      }, 
      module: { 
       loaders: [ 
        // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader` 
        { test: /\.tsx?$/, loader: 'ts-loader' } 
       ] 
      }, 
      ts: { 
       "compilerOptions": { 
        "target": "es5", 
        "sourceMap": true, 
        "jsx": "react", 
        "experimentalDecorators": true 
       }, 
       "exclude": [ 
        "node_modules" 
       ] 
      }, 
          externals: grunt.file.readJSON('our-ui/webpack-externals.json'), 
      stats: { 
       // Configure the console output 
       colors: true, 
       modules: false, 
       reasons: true 
      }, 
      progress: true 
     }, 
     prod: { 
      stats: { 
       colors: false, 
       modules: true, 
       reasons: true 
      }, 
      plugins: [ 
       new webpack.optimize.UglifyJsPlugin(), 
       new webpack.optimize.OccurenceOrderPlugin(), 
       new webpack.optimize.DedupePlugin() 
      ] 
     }, 
     dev: { 
      debug: true, 
      devtool: 'inline-source-map', 
      cache: true 
     } 
    }, ... 

私たちのビルドは、環境に応じて、grunt webpack:devまたはgrunt webpack:prodを呼び出します。

これを実行すると、すべてのJavaScriptがクロージャコンパイラを使用して一緒に縮小されます。 1分のファイルの最後に、マップファイルをポイントするコメント付き参照が追加されます。私が解決しようとしている問題は、production typescriptでコンパイルされたJavaスクリプトのソースマップがないことです。ソースマップは、typescriptから作成されたjavascript以外はすべてあります。

私は右の場所にある分、マップファイルを探して、コマンドラインでgrunt webpack:prodを実行

1. によってテストされている（彼らはそこにあり、おそらく非tsジャバスクリプトを含む）

2. prodモードでwarをデプロイし、source-mapをonにして、ブラウザのdevツールから期待されるJavaScriptファイルを探します。

まだブラウザでソースファイルが見つかりません。

この不正な作業は正しいですか？それとも別のところで問題が...？私はすべてが正常に動作させることもなく、私の場合にはgrunt tsを使用

Answer 1

私は部分的な答えがあります。プロードの部分では、私はソースマップのdevtoolが不足していました。しかし、このソースマップはJavaScriptファイルにマッピングされ、Typescriptソースファイルにはマッピングされません。

Answer 2

私はこれでした：私のGruntfileで

を：

ts: { 
     default: { 
      tsconfig: true, 
     }, 
     options: { 
      fast: 'never' 
     } 
    } 

そして、私のtsconfig.jsonでこの：

{ 
    "compileOnSave": true, 
    "compilerOptions": { 
    "removeComments": true, 
    "noImplicitAny" : false, 
    "module": "commonjs", 
    "target": "es5", 
    "sourceMap": true, 
    "outDir": "compiled", 
    "watch": true 
    }, 
    "exclude": [ 
    "node_modules" 
    ] 
} 

私の場合は、tsconfigファイルを設定した場合にのみ完全に動作します。

ご希望の場合はお手数ですが、

Ps：これらはtsconfigの自分のオプションです。grunt tsオプションと似ています。