0

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

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

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

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

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

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

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

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

4

1 回答 1

0

对于任何一直在努力解决此类问题的人。我需要正确配置 webpack 以知道在哪里可以找到我的部分和助手（我虽然 express-handlebars 配置这样做了，但这仅适用于服务器端）。

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”模块的链接中有一些示例。

于 2018-03-11T14:01:40.333 回答