bem, enb, enb-bemxjst/bemhtml, enb-source-map: Проблема с sourcemaps для шаблонов

Форум /

Съезжают настройки sourcemaps для технологий bemhtml.js и browser.js. Глядя на старые проекты (где всё как-то работало), кое-как восстанавливаю для browser.js (перадчей параметров из конфига enb/make + патчем модулей enb-source-map, source-map), для bemhtml.js пока вообще не могу найти, куда крутить?

Хелп? Как это делается? Или у всех из коробки работает? А почему у меня -- никогда (теперь; кажется)?

Текущий проект бутстрапил на последнем bem/project-stub (месяц назад) перстаскивал библиотеки/патчи из старых проектов.

Попробовал на "чистом" project-stub -- при минимальных изменениях (меняем в index.bemjson.js подключение скрипта index.js на последовательные: index.bemhtml.js и index.browser.js) -- И достигаем такого же эффекта: sourcemaps подтягиваются для browser.js, для bemhtml.js перебрасывает совсем в другие места общего бандла. Чего/куда крутить?

UP: Глянул на старые проекты ещё раз: там sourcemaps от шаблонов были вообще откручны. Т.е., дебажимся уже в собранном бандле. Т.е., видимо, так и дальше надо. Вывод: отключаем все sourcemaps от технологии bemhtml вообще, раз так.

7 years ago

lilliputten

Товарищи, я, как обычно, забыл указать, что всё происходит на Win10. Соотв., лечение для windows (кривое, вероятно, как обычно; но уж что нашёл...): патч в node_modules/enb-bemxjst/techs (enb-bemxjst@8.10.4):

bemhtml.js.diff:

--- ./bemhtml.js.orig    2018-10-02 22:35:50.249827500 +0300
+++ ./bemhtml.js    2018-10-03 00:21:58.378340800 +0300
@@ -56,6 +56,7 @@
     .defineOption('requires')
     .defineOption('iife', false)
     .defineOption('sourcemap', false)
+    .defineOption('sourceRoot') // Pass project root for transforming sourcemap paths
     .defineOption('forceBaseTemplates', false)
     .useFileList(['bemhtml.js'])
     .builder(function (fileList) {
@@ -66,7 +67,7 @@

         var filenames = this._getUniqueFilenames(fileList);

-        return this._readFiles(filenames)
+        return this._readFiles(filenames, this._sourceRoot) // Pass project root for transforming sourcemap paths (see `./bem-xjst.js`)
             .then(this._processSources, this)
             .then(this._compileBEMHTML, this);
     })

bem-xjst.js.diff:

--- ./bem-xjst.js.orig    2018-10-02 23:26:59.330024300 +0300
+++ ./bem-xjst.js    2018-10-03 00:22:55.563183600 +0300
@@ -71,13 +71,18 @@
          * Each file will be in a form of an object `{ path: String, contents: String }`.
          *
          * @param {String[]} filenames - paths to files
+         * @param {String} [sourceRoot] - project root path withoud finishing '/' or '\'
          * @returns {Promise}
          * @private
          */
-        _readFiles: function (filenames) {
+        _readFiles: function (filenames, sourceRoot) {
             return vow.all(filenames.map(function (filename) {
                 return vfs.read(filename, 'utf8')
                     .then(function (source) {
+                        // Transforming sourcemap paths replacing windows project root with `../../`...
+                        if (sourceRoot && filename.indexOf(sourceRoot) === 0) {
+                            filename = '../..' + filename.substr(sourceRoot.length).replace(/\\/g, '/');
+                        }
                         return {
                             path: filename,
                             contents: source

Т.е., пропихиваем в технологию текущий путь к корню проекта и заменяем на ../../ (относительно нашего *.bundles/<bundleName>/).

В make.js пользуем так:

  [techs.bemhtmlJs, {
    sourceSuffixes: ['bemhtml', 'bemhtml.js'],
+   sourceRoot: process.cwd(), // Project root path
    sourcemap: true,
    engineOptions : { elemJsInstances : true },
  }],

После этого всё чудесным образом заводится.

Closed.

Чтобы оставлять комментарии, необходимо авторизоваться.