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多線字符串使其更容易。