Генерация исходной карты Javascript без добавления NPM в проект - PullRequest
Новая
       15

Генерация исходной карты Javascript без добавления NPM в проект

0 голосов
/ 04 сентября 2018

Мой веб-проект обслуживает статические веб-страницы и скрипты. Предварительная обработка не выполняется вообще. Все изменения сделаны в клиенте.

У него есть главная страница, на которой перечислены некоторые другие страницы. Когда пользователь щелкает ссылку, jQuery-UI загружает связанную HTML-страницу и все связанные файлы Javascript / CSS.

Это прекрасно работает и дает нам возможность легко добавлять / удалять новые страницы. Проблема в том, что когда мы хотим отладить загруженный JS, а браузер не знает об этом.

Мне потребовалось некоторое время, чтобы узнать об исходных картах, а затем выяснить, что все они ориентированы на каркасные проекты, такие как Angular и React.

Мы не хотим этого в этом проекте. Просто базовый HTML & JS, который мы можем подключить и перезагрузить. Я понимаю, что нам может потребоваться запустить внешнюю команду для генерации исходных карт, но это должен быть автономный инструмент - без NPM или фреймворков.

Это внутренний веб-проект, поэтому безопасность / конфиденциальность не имеет значения. Мы хотим, чтобы клиенты видели исходный код, если им это необходимо.

Я знаю, что есть много Вопросов об исходных картах JS, но каждый, который я обнаружил, предполагает использование некоторых инструментов фреймворка. У нас нет фреймворка, и мы не хотим его в этом проекте.

Какие-либо предложения о том, как мы можем сгенерировать нужные нам исходные карты, или вам известна какая-либо альтернатива отладке простого JS, загруженного через jQuery?

1 Ответ

0 голосов
/ 05 сентября 2018

Прежде всего, вам не нужно использовать Angular / React для работы с исходными картами. Это всего лишь общий случай использования.

Во-вторых, NPM это именно то, что он говорит; менеджер пакетов. Так что вам не нужно NPM.

Что вам нужно - это процесс сборки. Вы совершенно ясно, что вы не хотите минимизировать js, но вам нужны исходные карты. Это обычная конфигурация, используемая для отладки js, и обычно она выполняется путем «сборки» или «Uglifying» кода с отключенной оптимизацией.

Скорее всего, вы могли бы полностью избежать NPM, если бы хотели использовать компилятор Closure, но это червь, и я бы посоветовал вам этого избегать.

Вместо этого я предлагаю использовать Uglify * глобально * (для каждой машины) с NPM. Это шаг «один раз на машину». 

npm install uglify-js -g

*: Надеемся, что эта сторона повысит ваши требования без NPM. Я экспериментировал с клонированием репозитория Uglify напрямую, но даже тогда вам нужно было запустить его, и для этого, как минимум, вы захотите установить его зависимости с помощью NPM). Я бы хотел быть неправым в этом, но я подумал, что это очень не связано с этим постом.

И затем написание сценария сборки с использованием этого. Я попытался собрать детали для вас здесь:

Файл: gen-map.sh 

#!/usr/bin/env bash

uglifyjs file1.js --config-file gen-map.json \
  -o file1.min.js  \
  --source-map "root='http://foo.com/src',url='file1.min.js.map'"

cat file1.min.js

Файл: gen-map.json 

{ 
  "compress": false,
  "output": {
    "beautify": true
  },
  "sourceMap": {
    "content": "content from file1.js.map",
    "url": "file1.js.map"
  }
}

Файл: file1.js 

var b = function() {
  console.log('b');
};

function c() {
  console.log('c');
};

console.log('a');
b();
c();
(function() {
  console.log('d');
})();

Файл: file1.min.js 

var b = function() {
    console.log("b");
};

function c() {
    console.log("c");
}

console.log("a");

b();

c();

(function() {
    console.log("d");
})();
//# sourceMappingURL=file1.min.js.map

Файл: file1.min.js.map 

 {"version":3,"sources":["file1.js"],"names":["b","console","log","c"],"mappings":"AAAA,IAAIA,IAAI;IACNC,QAAQC,IAAI;;;AAGd,SAASC;IACPF,QAAQC,IAAI;;;AAGdD,QAAQC,IAAI;;AACZF;;AACAG;;CACA;IACEF,QAAQC,IAAI;EADd","sourceRoot":"http://foo.com/src"}

*: Uglify-es, если вы используете функции ES6.

После этого остается только обновить пути, имена файлов и фактические теги скрипта. Используя эту конфигурацию, вы все равно должны обслуживать файл min.js, хотя вполне возможно, что пометка вручную вашего JS-файла для указания на карту может работать ...

С этим конфигом вам нужно будет обновлять созданные файлы, выполнив:

? ./gen-map.sh

Делать это с npm и gulp было бы проще, но, если вы не возражаете против другого пакета, есть 2 общих "наблюдателя за измененными файлами", которые я могу предложить;

Nodemon : 

? nodemon gen-map.sh

ENTR 

? entr gen-map.sh
...