0

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

私たちのプロジェクトはTypescriptとJavasCriptおよびJSXを使用しておりgrunt ts、ソースマップを含むtypescriptをjavascriptにコンパイルするタスクを使用しています。JavaScript は最終的にまとめてコンパイルされてから圧縮され、最終的に min-file と対応する sourcemap ファイルが生成されます。残念ながら、ソースマップには typescript javascript が最終製品に含まれているようには見えません。これは、typescript で作成された 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 つの min ファイルの末尾に追加されます。私が解決しようとしている問題は、プロダクション typescript でコンパイルされた Java スクリプトのソース マップがないことです。ソース マップは、typescript から作成された javascript 以外のすべてのものにあります。

私は

  1. コマンド ラインで実行grunt webpack:prodし、適切な場所で min ファイルと map ファイルを探します (それらはそこにあります。おそらく ts 以外の JavaScript が含まれています)。

  2. prod モードで war をデプロイし、source-map 設定をオンにして、ブラウザー開発ツールから予期される JavaScript ファイルを探します。

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

この単調なタスクは正しいですか? それとも他に問題があるのでしょうか...

4

2 に答える 2

4

私grunt tsも使用しますが、私の場合、すべてを正しく機能させるためにこれを行いました：

私の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ます。

于 2016-03-29T13:55:13.967 に答える