Express-Handlebar & Webpack - 无法在多页应用程序中导出部件和帮助程序

Question

我正在使用车把来满足我的模板需求。我显然需要在服务器上渲染一些模板来处理构建标准布局(带有页眉、页脚、导航栏和内容面板等)。但我还需要一些客户端模板，以便我可以使用 ajax 获取数据，然后在模板中呈现它。

我在节点中选择了快速车把模块，因为它会自动编译服务器中的模板和布局。

有几篇文章建议我可以配置 webpack 以将我的模板、部分和帮助程序导出到客户端，以便我可以重用它们。

所以我创建了以下 webpack 配置：

et path = require('path');
module.exports = {
entry: {
	login: './public/js/users/login.index.js',
logout: './public/js/users/logout.index.js',
newListing: './public/js/listing/newListing.index.js',
listingCollection: './public/js/listing/newListing.index.js',
listingDetails: './public/js/listing/listingDetails.index.js',
userRegistration: './public/js/listing/newListing.index.js',
	},
	output: {
path: path.join(__dirname, '/public/js/bundles'),
publicPath: "/public/",
		filename: "[name].bundle.js"
	},
module: {
rules: [
{
test: /.handlebars$/,
include: [
path.resolve(__dirname, 'views/listing')
],
loader: "handlebars-loader"
}
]
}
};

我不想要单个分页应用程序，因此我已配置为仅导出与每个页面捆绑的必要.js文件。

我的应用程序.js负责快速车把配置的片段如下：

const exphbs = require('express-handlebars');
const routes = require('./app/routes');
const app = express();
const hbs = exphbs.create({
defaultLayout: 'main',
partialsDir: [
'views/partials',
'views/partials/common',
'views/partials/listing/paymentsAndExchange'
],
helpers: {
isListingType: function (v1, v2, options) {
if (v1 === v2) {
return options.fn(this);
}
}
}
});
app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');

我的问题是这些东西都没有导出到客户端/浏览器(部分和助手 - 我已经检查了导出的捆绑包，它们绝对不可用)。

最终，我放弃了尝试让它工作，而只是通过在脚本标记中编写标记来重新创建客户端中的部分，如下所示：

<script id="a-template" type="text/x-handlebars-template">
{{#unless somecondition}}
Say this
{{/unless}}
</script>

然后我得到对这个脚本的引用，并按照通常的方法编译模板并注入数据等。

但。。。这是不可能的，因为服务器端模板编译会解析此脚本，就好像它是页面视图的一部分一样，并且当它在客户端中呈现时，我已经丢失了所有车把符号 {{}}。

理想情况下，我只希望能够配置快速车把/webpack 组合，以导出每个页面的正确部分和帮助程序，以便我可以使用它们。

很多人一定在这个确切的用例中挣扎过，因为车把非常受欢迎，我知道它不应该只用于SPA。

如果有人对我有任何建议，我将不胜感激。

Answer 1

对于任何一直在与此类问题作斗争的人。我需要正确配置 webpack 才能知道在哪里可以找到我的部件和助手(我虽然快速车把配置这样做了，但这仅适用于服务器端)。

let path = require('path');
module.exports = {
entry: {
	login: './public/js/users/login.index.js',
logout: './public/js/users/logout.index.js',
newListing: './public/js/listing/newListing.index.js',
listingCollection: './public/js/listing/newListing.index.js',
listingDetails: './public/js/listing/listingDetails.index.js',
userRegistration: './public/js/listing/newListing.index.js',
	},
	output: {
path: path.join(__dirname, '/public/js/bundles'),
publicPath: "/public/",
		filename: "[name].bundle.js"
	},
module: {
loaders: [{
test: /.handlebars$/,
loader:  "handlebars-loader",
query: {
partialDirs: [
path.join(__dirname, 'views', 'partials')
],
helperDirs: [
path.join(__dirname, 'views', 'helpers')
]
}
}]
}
};

这使得编译的部件和帮助程序在客户端中可用，但我仍然需要在客户端代码中注册它们。

let mangaDetailsPartial = require("../../../views/partials/manga_specific_details.handlebars");
let animeDetailsPartial = require("../../../views/partials/anime_specific_details.handlebars");
let itemSpecificsPartial = require("../../../views/partials/listing/itemSpecifics.handlebars");
Handlebars.registerPartial("manga_specific_details", mangaDetailsPartial);
Handlebars.registerPartial("anime_specific_details", animeDetailsPartial);
Handlebars.registerPartial("item_specifics", itemSpecificsPartial);

现在一切正常。 在 npm 页面底部的链接中有一些"车把加载器"模块的示例。