Greasemonkey/Javascript預處理器和構建系統

我正在爲Greasemonkey寫一個適度複雜的腳本。其中的一部分是生成一大塊HTML和CSS，並將其填充到頁面中。我想保持這些HTML和CSS的blob作爲單獨的文件在我的源代碼樹，因爲：Greasemonkey/Javascript預處理器和構建系統

JavaScript有沒有多行字符串，所以無論我得到一個巨大的線，還是地段串聯的，或行延續。醜陋。
的文件進化速率不同，所以讓他們Git中單獨的文件是名義上更好
我的文字編輯器可以正確設置模式時，它不是嵌入另一個

在許多其他事情之一文件。

不幸的是，Greasemonkey腳本只是一個腳本，而不是一個包，所以我必須在某些時候內聯HTML和CSS。我試圖爲這個工作流找到一個好的構建系統。構建分發包括將HTML和CSS複製到用戶腳本中。

我的第一直覺是使用使C預處理器和#include，但只適用於線，這樣做是這樣的：

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

不工作。

我在找的東西與http://js-preprocessor.com/完全相同，但是當我運行它時不會拋出「錯誤數量的參數」錯誤。：P

來源

2011-11-28 nfirvine

我結束了自己的Python編程。這不是微不足道的（〜50 LOC），thg435，但它能完成這項工作。 Brock Adams的CDATA多行字符串使得它更容易。

來源

2011-12-06 21:03:07 nfirvine

嗯，這是一個很難回答的問題。我想你認爲@require or @resource-thingies，其中包括其他文件惱人（因爲它只在安裝/更新腳本時下載）。

另一種選擇是將文件保存在網頁上並有URL，並在需要時提取它們。這對chrome（同源策略）不起作用，但適用於greasemonkey/firefox。我可能會使用一些原始版本的東西（1個文件，相對URL和版本），然後localStorage，所以這些文件被緩存。

來源

2011-11-28 22:29:16 Johan

鉻userscripts支撐'GM_xmlhttpRequest（）'現在 - *包括*跨網站請求。請注意，Chrome！= Greasemonkey（除非是Tampermonkey）並且此問題未標記* userscripts *。 –

感謝您糾正我，我想我錯過了鉻更新。 – Johan

不客氣。 Chrome瀏覽器似乎以令人煩惱的速度更新，這是可以理解的。 ;） –

我不知道這樣一個工具，但它似乎很難用腳本語言編寫。例如，在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。

來源

2011-11-28 22:43:55 georg

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()加載代碼/數據。

來源

2011-11-29 08:08:46

這些多行字符串是一種可怕的，但幸運的是，JavaScript在一段時間之前跳過了鯊魚。關於'@ require' /'@ resource'，版本控制小blob聽起來像是半個痛苦，但最終還是會起作用的。這些東西是緊密結合的，所以給他們不同的版本在概念上並不合理。 – nfirvine

嘗試這一個一個 - @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

來源

2016-04-25 09:22:30 mym

這似乎與你的其他答案几乎相同，不是嗎？ – Ian

Greasemonkey/Javascript預處理器和構建系統

回答

相關問題