Typescript 2.0 和 Webpack 将 HTML 作为字符串导入
Typescript 2.0 and Webpack importing of HTML as string
我正在尝试在 webpack 的帮助下将 HTML 文件作为字符串导入(目前正在使用 webpack,因为 TypeScript 2.0 在非 ES6 目标上不支持 async/await)。
我遇到的问题是,即使 github 的 html-loader 版本支持配置标志 'exportAsEs6Default',我也无法正确设置它。有没有办法全局设置加载程序选项?因为如果我将 html-loader 添加到配置文件中的加载程序部分,加载程序将被调用两次,从而导致内容被嵌套。
我有以下定义文件来支持 HTML 的导入(如 the modules documentation 中的示例)
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"
}
]
}
};
所以经过一些修补,我找到了一种方法来完成这项工作。因为我不想向每个导入语句添加 'exportAsEs6Default' 查询参数,所以我从 html 的显式加载器更改为配置的加载器。
如果有人知道更好的方法,我会留下这个问题,因为目前我不确定我是否对这种方式感到满意(不需要加载程序),但也许它会帮助其他人面临同样的问题。
所以上面示例中的导入语句更改为
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"
}
]
}
};
使用的包没有变化。
我正在尝试在 webpack 的帮助下将 HTML 文件作为字符串导入(目前正在使用 webpack,因为 TypeScript 2.0 在非 ES6 目标上不支持 async/await)。
我遇到的问题是,即使 github 的 html-loader 版本支持配置标志 'exportAsEs6Default',我也无法正确设置它。有没有办法全局设置加载程序选项?因为如果我将 html-loader 添加到配置文件中的加载程序部分,加载程序将被调用两次,从而导致内容被嵌套。
我有以下定义文件来支持 HTML 的导入(如 the modules documentation 中的示例)
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"
}
]
}
};
所以经过一些修补,我找到了一种方法来完成这项工作。因为我不想向每个导入语句添加 'exportAsEs6Default' 查询参数,所以我从 html 的显式加载器更改为配置的加载器。
如果有人知道更好的方法,我会留下这个问题,因为目前我不确定我是否对这种方式感到满意(不需要加载程序),但也许它会帮助其他人面临同样的问题。
所以上面示例中的导入语句更改为
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"
}
]
}
};
使用的包没有变化。