如何在自己的 Typo3 6.2 扩展中包含 .js 文件？

Question

我在 Typo3 6.2 中使用扩展生成器、extbase 和流体进行了扩展。
我想在前端添加一个时间选择器。
我在网上找到了一个 .js 文件，并且想在扩展程序处于活动状态时包含它，因为我经常需要它。
我把那个文件放在这里：EXT:/Resources/Public/JS/timepicker.js。
我在this 文章中看到了一个解决方案，但添加了

page.includeJS.tx_myExtension = EXT:/Resources/Public/JS/timepicker.js

在我的 setup.txt 底部不起作用。

我并没有在那里定义page，所以我认为这可能是原因，但我真的不知道 - 这是我在 /typo3conf/ext//Configuration/ 中的 setup.txt（自动生成）排版/：

plugin.tx_myext_test {
    view {
        templateRootPath = {$plugin.tx_myext_test.view.templateRootPath}
        partialRootPath = {$plugin.tx_myext_test.view.partialRootPath}
        layoutRootPath = {$plugin.tx_myext_test.view.layoutRootPath}
    }
    persistence {
        storagePid = {$plugin.tx_myext_test.persistence.storagePid}
    }
}

最终，我希望我的前端函数能够与 datepicker 一起工作，因为我在根模板中包含了 jQuery。但我不想在其中包含时间选择器，只是为了我的扩展。

<script>
    $(function () {
        $('.lc-datepicker').datepicker();
        $('.lc-timepicker').timepicker();
    });
</script>

Answer 1

您可以像这样使用EXT: 的正确语法：

page.includeJS.myextension = EXT:extkey/Resources/Public/JS/timepicker.js

（你忘了extkey。）

请记住，使用 includeJSFooter 而不是 includeJS 可能会提高您网站的性能。

page.includeJS 是一个全局可用的 TypoScript 属性。因此，如果您在站点的根 TS 模板中使用它，则 JavaScript 文件将嵌入到每个页面，无论该插件是否在使用中。因此，如果您只想在嵌入了插件的页​​面上使用 JS，我建议使用下面的 Fluid 方法。

要实现这一点，请在模板中使用资源 ViewHelper：

<script src="{f:uri.resource(path: 'JS/timepicker.js')}"></script>
<script>
    $(function () {
        $('.lc-datepicker').datepicker();
        $('.lc-timepicker').timepicker();
    });
</script>

Resource ViewHelper 使用相对于您的扩展程序的 Resources/Public 目录的路径。

Answer 2

您可以定义在您的控制器类中包含 JS，以确保它只为您的扩展加载。

在 TypoScript 中，让 JS 文件可配置：

plugin.tx_myext.settings.javascript.file = EXT:myext/Resources/Public/JS/timepicker.js

在控制器动作中：

$this->response->addAdditionalHeaderData('<script src="' .
            $GLOBALS['TSFE']->tmpl->getFileName($this->settings['javascript']['file']) .
            '" type="text/javascript"></script>');