TypeScript 2.0 и webpack импорт HTML в виде строки
Я пытаюсь импортировать HTML-файл в виде строки с помощью webpack (в настоящее время используется webpack, потому что TypeScript 2.0 не поддерживает async/await для целей, отличных от ES6).
проблема у меня есть, даже если версия html-загрузчика из github поддерживает флаг конфигурации "exportAsEs6Default", я не получаю его правильно установить. Есть ли способ установить параметры загрузчика глобально? Потому что, если я добавляю html-загрузчик в раздел загрузчиков в конфигурационном файле, загрузчик вызывается дважды, вызывая содержимое, которое будет вложено.
у меня есть следующий файл определения для поддержки импорта HTML (как в Примере на документация по модулям)
declare module "html!*" {
const content: string;
export default content;
}
в corresponsing импорт заявлении:
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 файл config
"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"
}
]
}
};
1 ответов
Итак, после некоторых манипуляций я нашел способ сделать это. Поскольку я не хотел добавлять параметр запроса exportAsEs6Default в каждую инструкцию import, я изменил явный загрузчик для html на настроенный загрузчик.
Я оставлю этот вопрос открытым, если кто-то знает лучший способ, так как в настоящее время я не уверен, что я доволен этим способом (что-то родное для typescript будет найдено без необходимости загрузчика), но, возможно, это поможет другим столкнуться с тем же проблема.
таким образом, оператор импорта из приведенного выше примера изменился на
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"
}
]
}
};
нет изменений в используемых пакетах.