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()加载

Answer 2

嗯，这是一个很难的问题。我猜您认为 @require 或 @resource-thingies ，其中包含其他令人讨厌的文档（因为它仅在安装/更新脚本时才会下载）。

另一种选择是将文件保留在网络上并为其提供 URL，并在需要时获取它们。这不适用于 chrome（同源策略），但适用于 Greasemonkey/firefox。我可能会使用一些原始版本控制的东西（1 个带有相对 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），thg435，但它可以完成工作。 Brock Adams 的 CDATA 多行字符串使其变得更容易。

Answer 5

试试这个 - @Builder，它支持的功能包括直接来自 GitHub：https: //github.com/electricimp/Builder

小例子

@include "localFile.js"
@include once "github:jquery/jquery/build/[email protected]"

@set ABC 123

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