express-handlebars & webpack -无法在多个分页的应用程序中导出部分和助手

Question

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

我选择了node中的express-handlebar模块，因为它会自动编译服务器中的模板和布局。

有几篇文章建议我可以配置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文件。

我负责express-handlebars配置的app.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>

​

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

But...this是不可能的，因为服务器端模板编译将此脚本解析为页面视图的一部分，而当它呈现在客户端时，我已经丢失了所有的handlebars符号{{}}。

理想情况下，我只希望能够配置express-handlebars / webpack组合来为每个页面导出正确的部分和助手，这样我就可以使用它们了。

很多人肯定都为这个用例而苦苦挣扎，因为车把非常流行，我知道它不应该只在SPA中使用。

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

Answer 1

对于任何一直在与这类问题作斗争的人来说。我需要正确地配置webpack，以便知道在哪里可以找到我的部分和助手(我认为express-handlebar配置做到了这一点，但这只适用于服务器端)。

​

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页面底部的链接中有一些‘handlebars loader’模块的例子。