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

Greasemonkey/Javascript preprocessor and build system

本文关键字：构建 系统 处理器 预处理 Javascript Greasemonkey      更新时间：2023-09-26

我正在为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

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, version: @require http://My_Site/MyJs.js
    to: @require http://My_Site/MyJs.js?vers=2, etc

  • 如果包含在运行时被拉出，使用跨域AJAX，通过GM_xmlhttpRequest()加载代码/数据

嗯，这是个很难回答的问题。我猜你认为@require或@resource-thingies，其中包括其他烦人的文档(因为它只在安装/更新脚本时下载)。

另一种选择是将文件保存在网络上，并提供它们的url，并在需要时获取它们。这对chrome(同源策略)不起作用，但对greasemonkey/firefox有效。我可能会使用一些原始的版本控制的东西(一个文件与相对的url和版本)和localStorage，所以文件被缓存。

我不知道有这样的工具，但是用脚本语言编写它似乎并不难。例如，在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中调用

我用Python编写了自己的程序。这并不完全是微不足道的(~50 LOC)， thg435，但它完成了工作。Brock Adams的CDATA多行字符串使它更容易。

试试这个- @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
相关文章：