在Symfony2中使用Twig作为JavaScript的Assetic过滤器

有没有一种方法可以将树枝用作资产过滤器

我想做的是让Twig将我的JavaScript文件解析为Twig模板，然后将它们传递给Assetic，以便在生产中合并和缩小它们

你可能会挠头想我为什么要这么做，所以让我跳到一个例子

---

我正在用JavaScript制作一个游戏引擎，我需要有几个“类”的两个版本。 一个版本供用户使用，另一个版本供编辑器使用。其中一个类的示例是singletonWorld

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

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

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

// 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 %}

此类的编辑器版本可能如下所示：

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中使用原型继承时，只会继承公共函数，如果您甚至尝试扩展现有实例，您将无法访问闭包中的变量和函数

小树枝来营救了

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

因此，让我们再次将我们的基本世界类作为一个细枝模板

// 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 %}
}

---

现在问题来了：我怎样才能让你同意用树枝作为过滤器，这样我就可以做这样的事情：

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

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

// 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 %}

//细枝模板的用户版本
//gameengine.html.twig
{%javascripts filter=“js_twig_filter”
“@EngineBundle/Resources/public/js/world.js.twig”
%}
{%endjavascripts%}
//小树枝模板的编辑器版本
//gameeditor.html.twig
{%javascripts filter=“js_twig_filter”
“@EngineBundle/Resources/public/js/editableworld.js.twig”
%}
{%endjavascripts%}

您可能想到的一个即时解决方案是完全放弃闭包，只需将所有变量和函数公开，并在本应为私有的变量和函数前面加下划线。然而，对我来说，这不是一个有效的解决方案，因为我不仅仅是在创建一个库。游戏引擎需要从最终用户那里关闭它的所有内部组件，以阻止所有想要篡改正在运行的引擎的用户（对于那些用户，我有服务器验证，以确保来自受损客户端的非法操作不会通过服务器发送到其他客户端）

感谢您的支持，我希望有人能帮助我（在想到这个可能的解决方案之前，我已经尝试了好几天的替代方案）。

您需要首先渲染（在控制器中）所有的*.js.twig文件，并将其保存为*.js文件（使用

文件内容（）

在资源树中的某个位置运行）。然后将*.js文件加载到assetic过滤器中

此外，您还有很多库/语言/帮助程序，它们优雅地支持JavaScript中的OOP（如CoffeeScript、Backbone.js、下划线.js等）

祝你好运