Question

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

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

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

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

＆＃13;

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"
            }
        ]
    }
};

＆＃13;

我不想要一个分页应用，所以我配置为只导出与每个页面捆绑在一起的必要.js文件。

我的app.js片段负责express-handlebars配置如下：

＆＃13;

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');

＆＃13;

我的问题是这些东西都没有导出到客户端/浏览器（部分和帮助程序 - 我已经检查了导出的包，它们肯定不可用）。

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

＆＃13;

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

＆＃13;

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

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

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

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

如果有人对我有任何建议，我真的很感激。

Answer 1

对于那些一直在努力解决这类问题的人。我需要正确配置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);

现在一切正常。在'handlebars-loader'模块的npm页面底部的链接中有一些示例。

快递把手＆amp; webpack - 无法在多个分页应用

1 个答案: