Javascript 使用 es6 模板字符串加载器导入 html 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37818401/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Importing html files with es6 template string loader
提问by Tomek Buszewski
I want to import my templates into my js with es6 template string loader. The only difference in my case is that I don't want to include css, only html. My code is as follows:
我想使用es6 template string loader将我的模板导入到我的 js 中。在我的情况下唯一的区别是我不想包含 css，只包含 html。我的代码如下：
import app from '../../bootstrap.js';
import template from './header.html';
app.component('siteHeader', {
template
});
and my error is Uncaught SyntaxError: Unexpected token export.
我的错误是Uncaught SyntaxError: Unexpected token export。
回答by KevBot
I recently needed to do the same thing, and this is how I did it.
我最近需要做同样的事情，我就是这样做的。
1.I used the npm module html-loader, instead of es6-template-string-loader
1.我使用了 npm 模块html-loader，而不是es6-template-string-loader
2.Add to webpack.config.js
2.添加到webpack.config.js
Webpack 3
网络包 3
...
module: {
rules: [
{
test: /\.html$/,
exclude: /node_modules/,
use: {loader: 'html-loader'}
}
]
}
...
Webpack 1 (deprecated, but from original answer):
Webpack 1（已弃用，但来自原始答案）：
...
module: {
loaders: [
{
test: /\.html$/,
loader: "html-loader"
}
]
}
...
3.Use in your JS files
3.在你的JS文件中使用
import template from './header.html';
回答by Artemy
Consider using Raw Loader.
考虑使用Raw Loader。
Your webpack configuration will contain this:
您的 webpack 配置将包含以下内容：
...
module: {
rules: [
{
test: /\.tpl.html$/,
use: 'raw-loader'
}
]
}
...
In your code write
在你的代码中写
import tpl from './mytemplate.html';
回答by Vinodh
The solution posted here is correct. Just adding an info to the error i faced when implementing the solution mentioned.
此处发布的解决方案是正确的。只需向我在实施提到的解决方案时遇到的错误添加信息。
I got the error: TS2307: Cannot find module './index3.html'
This was because of typescript compilation error.
The work around was here
我收到错误：TS2307：找不到模块 './index3.html'
这是因为打字稿编译错误。解决办法就在这里
Had to define a file: html.d.ts containing the below
必须定义一个文件：包含以下内容的 html.d.ts
declare module '*.html' {
const value: string;
export default value
}
回答by ijmacd
I assume your webpack.config.jsis along the lines of this:
我假设你webpack.config.js是这样的：
...
module: {
loaders: [
{
test: /\.html$/,
loader: "es6-template-string"
}
]
}
...
The problem is that template-string-loaderoutputs an exported template string function using ES6 syntax. You'll still need to pass that through babel.
问题是template-string-loader使用 ES6 语法输出导出的模板字符串函数。你仍然需要通过 babel 传递它。
Your configuration should look something like this:
您的配置应如下所示：
...
module: {
loaders: [
{
test: /\.html$/,
loader: "babel?presets[]=es2015!es6-template-string"
}
]
}
...
To use it you need to call is as a function:
要使用它，您需要将其作为函数调用：
import app from '../../bootstrap.js';
import template from './header.html';
app.component('siteHeader', {
template()
});
回答by JabbyPanda
Try
尝试
module: {
loaders: [
{
test: /\.html$/,
loader: 'html-loader?exportAsEs6Default',
}
]
}
More info on this config syntax can be read in html-loaderrepo readme
可以在html-loaderrepo readme 中阅读有关此配置语法的更多信息
https://github.com/webpack-contrib/html-loader#export-formats
https://github.com/webpack-contrib/html-loader#export-formats
回答by András Endre
I would use raw-loaderinstead of text-loader, because it has much more contributors and it's officially mentioned on the webpack documentation: https://webpack.js.org/loaders/raw-loader/
我会使用raw-loader而不是text-loader，因为它有更多的贡献者，并且在 webpack 文档中正式提到：https://webpack.js.org/loaders/raw-loader/
It's a safer choice on the long run. Download link: https://www.npmjs.com/package/raw-loader
从长远来看，这是一个更安全的选择。下载链接：https: //www.npmjs.com/package/raw-loader
webpack.config.js
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(tpl|txt)(\?.*)?$/,
use: 'raw-loader'
}
]
}
}
Now, I can use it to load a template file as a stringfor my components, like:
现在，我可以使用它来加载模板文件作为组件的字符串，例如：
import Vue from 'vue'
import MyTemplate from './template.tpl'
Vue.component('my-component',{
'template' : MyTemplate
})
