gpt4 book ai didi

typescript - 使用 webpack 从 typescript 导入 html

转载 作者:搜寻专家 更新时间:2023-10-30 21:05:33 26 4
gpt4 key购买 nike

我正在尝试使用 webpack 将 html 导入 typescript 中的变量。

这是我的设置:

package.json:

{
"devDependencies": {
"awesome-typescript-loader": "^3.2.3",
"html-loader": "^0.5.1",
"ts-loader": "^2.3.7",
"typescript": "^2.5.3",
"webpack": "^3.6.0"
}
}

webpack.config.js:

const path = require('path');
const webpack = require('webpack');

module.exports = {
context: path.join(__dirname),
entry: './main',
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
},
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".js"],
modules: [
"node_modules",
path.join(__dirname, 'app'),
],
},
module: {
rules: [
{
enforce: 'pre',
test: /\.html$/,
loader: 'html-loader',
},
// Faster alternative to ts-loader
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
configFileName: 'tsconfig.json',
},
exclude: /(node_modules)/,
},
],
},
};

main.ts:

import template from './template.html';
console.log(template);

模板.html:

<p>Hello World !</p>

当我尝试使用 webpack 进行编译时:

$ ./node_modules/.bin/webpack 

[at-loader] Using typescript@2.5.3 from typescript and "tsconfig.json" from /tmp/test/tsconfig.json.


[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 1 errors
Hash: d06d08edc313f90c0533
Version: webpack 3.6.0
Time: 2194ms
Asset Size Chunks Chunk Names
app.js 2.72 kB 0 [emitted] main
[0] ./main.ts 136 bytes {0} [built]
[1] ./template.html 40 bytes {0} [built]

ERROR in [at-loader] ./main.ts:1:22
TS2307: Cannot find module './template.html'.

我已经研究了半天,所以你可以确定 template.html 是它应该在的地方。

我从 webpack 配置中了解到,html-loader 应该首先处理文件,因此它应该将 html 文件的内容加载到变量中。至少,这曾经与 es6 一起工作......

谁能告诉我如何使用 webpack/typescript 将 html 加载到变量中?或者至少我的方法有什么问题。

最佳答案

一个简单的解决方法是在加载非 TypeScript Assets 时坚持使用 CommonJS“require”:

const template = require('./template.html');

如果您希望继续使用 import,可以配置 TypeScript 编译器以将文件作为字符串加载。下面的方法在 TypeScript 2.4.2 下对我有用。

将此 block 添加到项目的类型声明文件(我的名为 typings.d.ts):

// typings.d.ts
declare module '*.html' {
const content: string;
export default content;
}

您现在应该能够像这样导入 html 文件:

// main.ts
import template from './template.html';
console.log(template); // <p>Hello world !</p>

完全公开:我的项目使用了与您不同的加载器(见下文)。

// webpack.config.js
config.module = {
rules: [
{
test: /\.ts$/,
loader: '@ngtools/webpack'
},
{
test: /\.html$/,
use: 'raw-loader'
}
]
}

有一个 Github 线程 here讨论其他解决方案的地方。

关于typescript - 使用 webpack 从 typescript 导入 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46503615/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com