web-dev-qa-db-ja.com

Typescript2.0およびWebpackによるHTMLの文字列としてのインポート

Webpackを使用してHTMLファイルを文字列としてインポートしようとしています（TypeScript2.0はES6以外のターゲットでasync/awaitをサポートしていないため、現在webpackを使用しています）。

私が抱えている問題は、githubのhtmlローダーバージョンが構成フラグ「exportAsEs6Default」をサポートしていても、正しく設定できないことです。ローダーオプションをグローバルに設定する方法はありますか？構成ファイルのローダーセクションにhtml-loaderを追加すると、ローダーが2回呼び出され、コンテンツがネストされるためです。

HTMLのインポートをサポートする次の定義ファイルがあります（ モジュールのドキュメント の例のように）

declare module "html!*" {
    const content: string;
    export default content;
}

対応するインポートステートメント：

import templateString from "html!./Hello.html";

私が使用するパッケージのバージョン：

"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"html-loader": "git://github.com/webpack/html-loader.git#4633a1c00c86b78d119b7862c71b17dbf68d49de",
"ts-loader": "^0.9.5",
"TypeScript": "2.0.3",
"webpack": "^1.13.2"

そしてwebpack設定ファイル

"use strict";

module.exports = {
    entry: "./WebApp/Hello.ts",
    output: {
        path: "./wwwroot/compiled",
        filename: "app.bundle.js"
    },
    resolve: {
        extensions: ["", ".webpack.js", ".web.js", ".js", ".ts"]
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                loader: "babel-loader!ts-loader"
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    }
};
typescriptwebpacktypescript2.0webpack-html-loader
13
Fionn

それで、いじくり回した後、私はこれを成し遂げる方法を見つけました。 'exportAsEs6Default'クエリパラメーターをすべてのインポートステートメントに追加したくなかったので、htmlの明示的なローダーから構成済みのローダーに変更しました。

誰かがより良い方法を知っている場合に備えて、この質問は開いたままにしておきます。現在、私がこの方法に満足しているかどうかはわかりません（TypeScriptにネイティブなものは、ローダーを必要とせずに見つかります）が、おそらくそれは同じ問題に直面している他の人を助けるでしょう。

したがって、上記の例のimportステートメントは次のように変更されました。

import templateString from "./Hello.html";

更新された定義ファイルと一緒に

declare module "*.html" {
    const content: string;
    export default content;
}

そして、webpack設定ファイルはこれに変更されました：

"use strict";

module.exports = {
    entry: "./WebApp/Hello.ts",
    output: {
        path: "./wwwroot/compiled",
        filename: "app.bundle.js"
    },
    resolve: {
        extensions: ["", ".webpack.js", ".web.js", ".js", ".ts", ".html"]
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                loader: "babel-loader!ts-loader"
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                loader: "html-loader?exportAsEs6Default"
            }
        ]
    }
};

使用済みパッケージに変更はありません。

15
Fionn