Greasemonkey / Javascript препроцессор и система сборки - PullRequest
Новая
       28

Greasemonkey / Javascript препроцессор и система сборки

3 голосов
/ 28 ноября 2011

Я пишу довольно сложный скрипт для Greasemonkey.Частично это генерирует большой кусок HTML и CSS и втискивает его в страницу.Я хотел бы сохранить эти BLOB-объекты HTML и CSS как отдельные файлы в моем исходном дереве, поскольку:

  • В 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

Ответы [ 5 ]

2 голосов
/ 29 ноября 2011

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() для загрузки кода / данных.

1 голос
/ 29 ноября 2011

Я не знаю о таком инструменте, но, кажется, нетрудно писать на языке сценариев. Например, в 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 или как угодно и вызвать его в вашем make-файле.

1 голос
/ 29 ноября 2011

Хм, это сложный вопрос. Полагаю, вы сочли раздражающим @ require или @ resource-thingies , который включает другие документы (поскольку он загружается только при установке / обновлении скрипта).

Другим вариантом может быть сохранение файлов в Интернете и получение URL-адресов к ним, а также получение их при необходимости. Это не будет работать для chrome (политика того же происхождения), но работает для greasemonkey / firefox. Вероятно, я бы тогда использовал некоторые необработанные версии (1 файл с относительными URL-адресами и версиями) и localStorage, поэтому файлы кэшируются.

0 голосов
/ 25 апреля 2016

Попробуйте это - @ 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
0 голосов
/ 07 декабря 2011

Я закончил кататься на Python. Это не совсем тривиально (~ 50 LOC), thg435, но это делает работу. Многострочная строка CDATA от Brock Adams упрощает работу.

...