如何将js脚本传递给特定的页面类型？

Question

目前我在site.js中有所有页面脚本，并通过这样的撇号资源传递：

module.exports = {
  stylesheets: [...],
  scripts: [
    {
      name: 'site'
    }
]

如何将某些服务器/客户端js代码传递给特定的页面类型？

Answer 1

目前，Apostrophe没有专门提供这样做的方法。令人惊讶的是，将脚本标记添加到页面模板并不是一个糟糕的主意。您可以通过覆盖页面模板中的body nunjucks块，将其加载到extraBody标记的末尾：

{% block extraBody %}
  <script src="/modules/my-module/js/special-page.js"></script>
{% endblock %}

由于Apostrophe为每个模块的资产提供了符号链接，因此该路径将在此处找到该文件：

lib/modules/my-module/js/special-page.js

这并不可怕的原因是：你推送到撇号的.js资产被缩小并在每个页面上一起发送......这意味着浏览器会缓存它们。但是如果每种页面类型都有单独的资产“场景”，那么将它们全部缩小在一起就需要为每种页面类型单独缩小“big fat .js文件”，并且在不同类型的页面之间移动时不会有缓存优势

因此，允许Apostrophe缩小您总是/几乎总是使用的东西，并且单独发送您很少使用的东西，结果证明在很多时候都是胜利。您保留缓存中的通用内容，并为特定页面类型获取一些自定义内容。

当然，如果你写这样的脚本标签，Apostrophe不会为你缩小.js文件。您可以使用自己的gulp工作流来构建.js文件，如果您渴望跨浏览器使用ES6功能，这对于项目特定代码来说并不罕见。

另见：

Incorporating gulp to compile js in apostrophe?

但请考虑一下......一旦你意识到用户将在网站访问中访问几种类型的页面，决定你应该将它们全部推到一起并让Apostrophe一起缩小它并不是一个很大的步骤。例外情况应该是当一个页面类型的特殊有效负载真的非常大时，用户可能不会在大多数站点访问中访问该页面。在那个边缘情况下，我们也知道也遵循这种技术。撇号本身依赖于ckeditor的动态加载器，以避免在每次登录时推送所有ckeditor富文本编辑器代码。