使用Twig作为Symfony2中JavaScript的Assetic过滤器 [英] Using Twig as an Assetic filter for JavaScript in Symfony2

问题描述

有没有办法将Twig用作资产过滤器？

Is there a way to use Twig as an Assetic filter?

我想要做的是让Twig将我的JavaScript文件解析为Twig模板，然后传递它们为了让他们在生产中得到合并和缩小。

What I want to do is have Twig parse my JavaScript files as Twig templates, and then pass them to Assetic so that they get combined and minified in production.

你可能会想到我为什么要这样做，所以让我跳吧举例来说。

You might be scratching your head thinking why I would want to do this in the first place, so let me jump to an example.

我正在使用JavaScript构建游戏引擎，我需要有几个类的两个版本。
用户的一个版本和编辑器的另一个版本。其中一个类的示例是单例 World 。

I am making a game engine in JavaScript and I need to have two versions of several 'classes'. One version for the user and another for the editor. An example of one of these classes would be the singleton World.

此类的用户版本可能如下所示：

The user version of this class might look like this:

var World = function()
{
    // bunch of 'private' variables and functions inside closure
    var _initialised = false;
    var _worldData;
    ...

    // public functions
    this.init = function(){...}
    this.update = function(){...}
    ...
}

此类的编辑器版本可能看起来这个：

The editor version of this class might look this:

var World = function()
{
    // bunch of 'private' variables and functions inside closure
    var _initialised = false;
    var _worldData;
    ...

    // bunch of new private variables and functions for editing
    var _editorserver;
    ...

    // public functions
    this.init = function(){...}
    this.update = function(){...}
    ...

    // public functions that edit the world
    this.addEntity = function(){...}
    this.removeEntity = function(){...}
    ...
}

使用经典OO继承我们可以将 World 定义为一个类，然后使用另一个类 EditableWorld 扩展它。但是，在JavaScript中使用Prototypal继承只会继承公共函数，如果您甚至尝试扩展现有实例，则无法访问闭包内的变量和函数。

With classical OO inheritance we could define World as one class and then extend it with another class EditableWorld. However with Prototypal inheritance in JavaScript only the public functions would be inherited and if you even tried to extend the existing instance you would not be able to access the variables and functions inside the closure.

来自Twig救援！

使用Twig，我们可以在文件中的任何类中添加几个块，然后创建另一个定义同一类的文件扩展，然后包含那个文件。

With Twig we could add several blocks to any class in a file, and then create another file defining the same class with some extensions and then include that file.

因此，让我们再次将我们的基本 World 类视为Twig模板。

So let's look at our base World class again as a Twig template.

// world.js.twig
var World = function()
{
    // bunch of 'private' variables and functions inside closure
    var _initialised = false;
    var _worldData;
    ...

    {% block extended_privates %}{% endblock %}

    // public functions
    this.init = function(){...}
    this.update = function(){...}
    ...

    {% block extended_publics %}{% endblock %}
}

我们的扩展版本。

// editableworld.js.twig
{% extends "EngineBundle::world.js.twig" %}
var World = function()
{
    // bunch of 'private' variables and functions inside closure
    var _initialised = false;
    var _worldData;
    ...

    {% block extended_privates %}
    // bunch of new private variables and functions for editing
    var _editorserver;
    ...
    {% endblock %}

    // public functions
    this.init = function(){...}
    this.update = function(){...}
    ...

    {% block extended_publics %}
    // public functions that edit the world
    this.addEntity = function(){...}
    this.removeEntity = function(){...}
    ...
    {% endblock %}
}

---

现在这里有一个问题：你如何让Assetic使用Twig作为过滤器，我可以做这样的事情：

---

Now here's the rub: how do you I get Assetic to use Twig as a filter so that I can do something like this:

// user version of twig template
// gameengine.html.twig

{% javascripts filter="js_twig_filter"
"@EngineBundle/Resources/public/js/world.js.twig"
%}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}

// editor version of twig template
// gameeditor.html.twig

{% javascripts filter="js_twig_filter"
"@EngineBundle/Resources/public/js/editableworld.js.twig"
%}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}

可能出现的一个直接解决方案是放弃完全关闭，只是将我的所有变量和函数公开，并将前缀应该是私有的前缀加上前缀。但对我来说，这不是一个有效的解决方案，因为我不仅仅是创建一个库。游戏引擎需要关闭来自最终用户的所有内部构件，以阻止所有想要篡改正在运行的引擎的用户（对于那些我已经进行服务器验证的用户，以确保来自受感染客户端的非法操作）不要通过服务器发送给其他客户。）

One immediate solution that might come to your head is to forgo closures altogether and just make all my variables and functions public and just prefix the ones that should have been private with an underscore. However for me this isn't a valid solution as I'm not merely creating a library. The game engine needs to close off all of it's internals from the end user to stop all but determined users who would want to tamper with the running engine (and for those users I have server validation in place to make sure illegal actions from the compromised clients don't get sent to other clients via the server).

感谢您坚持下去，我希望有人可以帮助我（我一直在撞墙在我想到这个可能的解决方案之前几天尝试其他想法。）

Thanks for sticking around and I hope someone can help me (I've been banging my head against the wall for a few days now trying alternative ideas before I thought of this possible solution).

推荐答案

你需要渲染（在控制器中） ）首先将所有* .js.twig文件保存为* .js文件（在资源树中的某处使用 file_put_contents（）函数）。然后将* .js文件加载到资产过滤器中。

You need to render (in the controller) all the *.js.twig files first and save them as *.js files (using file_put_contents() function somewhere in the Resources tree). Then load the *.js files into your assetic filters.

此外，您有很多图书馆/语言/助手，它们优雅地支持JavaScript中的OOP（如CoffeeScript，Backbone） .js，Underscore.js等。）

Besides, you have a lot of libraries/languages/helpers that support OOP in JavaScript elegantly (like CoffeeScript, Backbone.js, Underscore.js, etc.)

祝你好运！

这篇关于使用Twig作为Symfony2中JavaScript的Assetic过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！