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()加载代码/数据。

Answer 2

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

另一种选择是将文件保留在网络上并为其提供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

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

Answer 5

Try this one one – @Builder, which among other features supports includes directly from GitHub: https://github.com/electricimp/Builder

Little example

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

@set ABC 123

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

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

5 个答案: