javascript - Greasemonkey/Javascript 预处理器和构建系统

Question

我正在为 Greasemonkey 编写一个中等复杂的脚本。其中一部分是生成大量 HTML 和 CSS 并将其塞入页面。我想将这些 HTML 和 CSS blob 作为单独的文件保存在我的源代码树中，因为:

• Javascript 没有多行字符串，所以要么我得到一个巨大的行，要么有很多连接，或者行继续。丑。
• 文件以不同的速度发展，因此在 Git 中将它们作为单独的文件理论上更好
• 当不是一个文档嵌入另一个文档时，我的文本编辑器可以正确设置模式

还有很多其他事情。

不幸的是，Greasemonkey 脚本只是一个单一的脚本，而不是一个包，所以我必须在某些时候内联 HTML 和 CSS。我正试图为这个工作流程找到一个好的构建系统。为分发构建将涉及从 HTML 和 CSS 复制到用户脚本中。

我的第一直觉是使用 make C 预处理器和 #include，但这只适用于行，所以做类似的事情:

var panel = document.createElement('div');
panel.innerHTML = '#include "panel.html"';

不起作用。

我正在寻找的是与 http://js-preprocessor.com/ 完全相同的东西，但是当我运行它时，它不会抛出“错误的参数数量”错误。 :P

Answer 1

JavaScript，至少对于 Firefox (Greasemonkey) 确实有多行字符串。因此，您可以将代码存储在变量中，而不必费力地使用连接或 \ 字符。

例如，这在 Firefox 中有效:

var myPageCodeString = (<><![CDATA[

    <style type="text/css">
        .UpperLeft {
            position:           absolute;
            left:               0;
            top:                0;
            background:         orange;
        }
    </style>
    <script type="text/javascript">
        console.log ("Look at me, Ma! I was data, now I'm JS code!");
    </script>

    <div class="UpperLeft">
        <p>Look at me, Ma!</p>
        <p>I was data, now I'm HTML code!</p>
    </div>

]]></>).toString ();


$("body").append (myPageCodeString);

在包含 jQuery 的页面上从控制台尝试。

除此之外:

• 如果包含在“编译”时固定，使用@require和/或 @resource .
  如果安装的脚本将就地更新(相对于卸载然后重新安装)，请务必重命名或“版本化”任何 @require 或 @resource 文件，以便 GM/FF 将更新用户机器上的副本。

  EG，版本:@require http://My_Site/MyJs.js
  至:@require http://My_Site/MyJs.js?vers=2 等
  
  

• 如果包含在运行时提取，请使用跨域 AJAX，通过 GM_xmlhttpRequest()加载代码/数据。