Как добавить строку JavaScript в каждый модуль, скомпилированный Webpack? - PullRequest
Новая
       16

Как добавить строку JavaScript в каждый модуль, скомпилированный Webpack?

0 голосов
/ 07 июня 2018

Я хочу добавить строку JavaScript ко всем модулям, которые требуются в моем коде и скомпилированы Webpack.

Например, если мой файл entry.js выглядит следующим образом: 

import _ from 'lodash';
import $ from 'jquery';
import init from './init.js';

init();

Я хочу, чтобы мой output.js пакет состоял из чего-то вроде этого: 

function(module, exports, __webpack_require__) {
  // prepended JavaScript goes here

  // code for lodash module below
}

function(module, exports, __webpack_require__) {
  // prepended JavaScript goes here

  // code for jquery module below
}

function(module, exports, __webpack_require__) {
  // prepended JavaScript goes here

  // code for init.js module below
}

function(module, exports, __webpack_require__) {
  // prepended JavaScript goes here

  var _lodash = __webpack_require__(1);
  var _jquery = __webpack_require__(2);

  init();
}

Я пытался написать простой загрузчик, и он работал, за исключением того, что он не включал модули из node_modules, так как яисключая те из моего /\.js$/ правила.

Так что я подозреваю, что мне нужно использовать плагин.Это то, что у меня есть до сих пор: 

var pluginName = "PrependJSPlugin";

var apply = (options, compiler) => {
  compiler.hooks.compilation.tap(pluginName, compilation =>
    compilation.hooks.afterOptimizeModules.tap(pluginName, modules => {
      modules.forEach(mod => {
        if (mod.resource !== void 0 && mod.resource.includes(".js")) {
          var contId = "__WBP_PREPEND__";
          var script = `
            ;var el = document.createElement('pre');
            el.innerHTML = '${mod.resource}';

            var container = document.getElementById('${contId}');
            if (!container) {
              container = document.createElement('div');
              container.id = '${contId}';
              container.appendChild(el);
              document.getElementsByTagName('body')[0].appendChild(container);
            } else {
              container.appendChild(el);
            }
          `;
          mod._source._value = script + mod._source._value;
        }
      });
    })
  );
};

module.exports = function(options) {
  return {
    apply: apply.bind(this, options)
  };
};

По большей части, кажется, что он добавляет его правильно, но скомпилированный вывод как-то искажается, и я вижу повсюду синтаксические ошибки.Я определенно делаю то, чего не должен делать с этим свойством _source.

Может ли кто-нибудь указать мне правильное направление?

Почему я хочу сделать это?

Это не то, что пойдет в производство.Я пытаюсь отладить ошибку PhantomJS v1, возникающую в стороннем сервисе, который я использую для рендеринга PDF со страницы Angular.Да, я знаю!

Я ловлю ошибки с window.onerror и добавляю их в тело, чтобы они отображались в отрендеренном PDF.К сожалению, ошибки не включают исходный файл и номера строк.Поэтому я пытаюсь отобразить имя каждого модуля до его запуска, надеясь увидеть, на каком из них JavaScript перестает выполняться.

...