[英]Handlebars with Webpack returns Javascript code instead of rendering the HTML
I have a basic Laravel project, A todo app, And I'm using Laravel Elixir to compile down assets, And I'm using handlebars-loader
for Webpack to compile down my assets. 我有一个基本的Laravel项目,一个todo应用程序,我正在使用Laravel Elixir来编译资产,而我正在使用Webpack的Handlebars handlebars-loader
来编译我的资产。
Here's my gulpfile.js: 这是我的gulpfile.js:
const elixir = require('laravel-elixir');
elixir((mix) => {
mix.webpack('app.js', null, null, require('./webpack.config.js'));
});
And I'm requiring webpack.config.js because I want to load the handlebars-loader
我需要webpack.config.js因为我想加载handlebars-loader
Here's my webpack.config.js: 这是我的webpack.config.js:
module.exports = {
module: {
loaders: [
{ test: /\.handlebars$/, loader: "handlebars-loader" }
]
},
};
And for making things simpler for this question I'm gonna put all my code in app.js: 为了使这个问题更简单,我将把所有代码都放在app.js中:
'use strict';
var _token = $('meta[name="csrf-token"]').attr('content');
var renderErrorsTemplate = require('./../templates/errors.handlebars');
var renderTasksTemplate = require('./../templates/task.handlebars');
$('#taskForm').submit(function(event) {
var form = $(this);
var request = $.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
});
request.done(function(response) {
renderTasks(response);
});
request.fail(function(response) {
renderErrors(response.responseText);
});
event.preventDefault();
});
function renderTasks(response) {
var response = {task: response, token: _token};
$('#tasks').append(renderTasksTemplate(response));
console.log(renderTasksTemplate);
}
function renderErrors(response) {
$('#errors').html(renderErrorsTemplate(JSON.parse(response)))
console.log(renderErrorsTemplate(response));
}
I'm using require('template.js')
to require the needed templates, Without using Laravel Elixir it works on another plain App without using any frameworks, but If I run gulp
in the terminal, it will compile it down, so later when I trigger the functions using click events, it just returns some Javascript code instead of actually running that Javascript code and render the templates. 我正在使用require('template.js')
来获取所需的模板,不使用Laravel Elixir它可以在不使用任何框架的情况下在另一个普通应用程序上运行,但如果我在终端中运行gulp
,它会将其编译下来,所以稍后当我使用点击事件触发函数时,它只返回一些Javascript代码,而不是实际运行该Javascript代码并呈现模板。
This is what it returns: 这是它返回的内容:
var Handlebars = require("/home/akar/Code/laravel-app/node_modules/handlebars/runtime.js"); function __default(obj) { return obj && (obj.__esModule ? obj["default"] : obj); } module.exports = (Handlebars["default"] || Handlebars).template({"1":function(container,depth0,helpers,partials,data) { return "
" + container.escapeExpression(container.lambda((depth0 != null ? depth0["0"] : depth0), depth0)) + "
\n"; },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { var stack1; return "
\n
\n" + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},depth0,{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") + "
\n
"; },"useData":true});
instead of the proccesed version of this template: 而不是这个模板的proccesed版本:
<div class="alert alert-danger">
<ul>
{{#each this}}
<li>{{ this.[0] }}</li>
{{/each}}
</ul>
So at the end I changed my gulpfile.js to this: 所以最后我改变了我的gulpfile.js:
const elixir = require('laravel-elixir');
elixir((mix) => {
mix.sass('app.scss')
.webpack('app.js');
});
So apparently, if you just run mix.webpack
by itself it will check automatically for any webpack.config.js
in your directory, and then read configurations from there. 显然,如果您只是自己运行mix.webpack
,它会自动检查您目录中的任何webpack.config.js
,然后从那里读取配置。
and I changed my webpack.config.js file to this: 我将我的webpack.config.js文件更改为:
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
module: {
loaders: [
{ test: /\.js$/, loader: 'buble' },
{ test: /\.handlebars$/, loader: "handlebars-loader" }
]
},
watch: true,
};
And also I removed node_modules
and did npm install
again. 我还删除了node_modules
并再次npm install
了npm install
。
Hope this helps someone, I don't know what was exactly causing this mess but I fixed it anyways. 希望这有助于某人,我不知道究竟是什么导致了这个混乱,但我还是修了它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.