typescript - from - use lodash in angular

La importación de HTML de Typescript 2.0 y Webpack como cadena

Question

Estoy tratando de importar un archivo HTML como una cadena con la ayuda de un paquete web (Actualmente, el uso del paquete web porque TypeScript 2.0 no es compatible con Async / Wait en objetivos que no sean ES6).

El problema que tengo es que, incluso si la versión html-loader de github admite una bandera de configuración ''exportAsEs6Default'', no la configuro correctamente. ¿Hay alguna manera de configurar las opciones de un cargador globalmente? Porque si agrego el html-loader a la sección de cargadores en el archivo de configuración, el cargador se llama dos veces, lo que hace que el contenido se anide.

Tengo el siguiente archivo de definición para admitir la importación de HTML (como en el ejemplo de la documentación de los módulos )

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

La declaración de importación correspondiente:

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

Las versiones de los paquetes que uso:

"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"

Y el archivo de configuración de la carpeta web

"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"
}
]
}
};

Answer 1

Entonces, después de algunos retoques, encontré la manera de hacer esto. Como no quería agregar un parámetro de consulta ''exportAsEs6Default'' a cada declaración de importación, cambié de un cargador explícito para html a un cargador configurado.

Voy a dejar esta pregunta abierta en caso de que alguien sepa una mejor manera, ya que actualmente no estoy seguro de si estoy feliz con esto (algo nativo en mecanografía sería encontrar sin la necesidad de un cargador), pero tal vez ayudará a otros a enfrentar el mismo problema.

Entonces, la declaración de importación del ejemplo anterior cambió a

import templateString from "./Hello.html";

Junto con un archivo de definición actualizado

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

Y el archivo de configuración de la carpeta web cambió a esto:

"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"
}
]
}
};

Sin cambios a los paquetes usados.