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） 确实有多行字符串。 因此，您可以将代码存储在变量中，而无需使用连接或\\ chars。

例如，这适用于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
  to： @require http://My_Site/MyJs.js?vers=2 ，等等
  
  

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

Answer 2

嗯，这是一个很难的问题。 我猜您考虑过@require或@ resource-thingies ，其中包含其他文件很烦人（因为它只在安装/更新脚本时才下载）。

另一个选择是将文件保留在Web上并为其提供URL，并在需要时获取它们。 这不适用于chrome（同源策略），但适用于greasemonkey / firefox。 我可能会使用一些原始的版本控制（带有相对URL和版本的文件）和localStorage，因此文件被缓存。

Answer 3

我不知道这样的工具，但用脚本语言编写似乎并不难。 例如，在node.js中

var fs = require('fs');

fs.readFile(process.argv[2], "utf-8", function(err, data) {
    console.log(data.toString().replace(/include\s+([\w.]+)/g, function($0, $1) {
        return fs.readFileSync($1).toString().replace(/\n/g, " ");
    }))
})

您可以将它放在build.js或其他任何内容中，并在makefile中调用它。

Answer 4

尝试这一个 - @Builder ，其中包括其他功能支持直接来自GitHub： https ： //github.com/electricimp/Builder

小例子

@include "localFile.js"
@include once "github:jquery/jquery/build/release.js@2.2.3"

@set ABC 123

@if ABC > 123
  //
@else
  //
@end

Answer 5

我在Python中结束了自己的创作。 这不是一件容易的事（~50 LOC），而是435，但它确实起到了作用。 Brock Adams的CDATA多线字符串使其更容易。