Sourcemaps off o jedną linię w Chrome, z Ruby on Rails, Webpack i React JS

96

Mam problem polegający na tym, że mapy źródeł generowane przez Webpack przy użyciu inline-source-mapustawienia konfiguracyjnego są wyłączone o jeden wiersz, gdy używam debugera Chrome devtools. Webpack jest konfigurowany w aplikacji Ruby on Rails w celu generowania połączonego, niezminimalizowanego pliku JavaScript składającego się z kilkudziesięciu modułów. Większość z tych modułów to komponenty ReactJS i są one analizowane przez jsxmoduł ładujący. Dane wyjściowe z Webpack są następnie dołączane do application.jspliku wraz z niektórymi innymi bibliotekami JavaScript wygenerowanymi przez gems.

Kiedy używam eval-source-map, nie ma problemu. Coś w użyciu inline-source-mappowoduje, że numery wierszy są odrzucane o jeden.

Sprawdzanie JavaScript, który nie jest komponentem Reacta, nadal ma ten problem, więc nie sądzę, że jest to związane z użyciem jsx.

javascript ruby-on-rails google-chrome webpack source-maps paradasia
źródło
4
Wygląda na to, że jedna strona uważa pierwszą linię za linię, 0a druga za linię 1. Być może będziesz musiał po prostu wybrać jedną definicję i dostosować wartość dla wszystkiego, co działa w inny sposób.
Carl Smith,
3
Jeśli istnieje sposób na dostosowanie wartości używanej przez przeglądarkę do numerów wierszy w mapach źródeł, może to potencjalnie rozwiązać problem. Od tamtej pory trochę poćwiczyłem i wydaje się, że kiedy używam Railsów bez Sprocketów przetwarzających JS wygenerowany przez webpack, problem znika. Numer linii jest wyłączony tylko w przypadku używania zarówno pakietu internetowego, jak i zębatek.
paradasia
1
Nie mam pojęcia. Używałem sourcemaps CoffeeScript z biblioteką JS z mapami źródłowymi Mozilli. Wszystko było w porządku, poza tym, że columnarg w poniższym kodzie jest przekazywana w 1 zbyt wysoka: window.onerror = function(message, url, line, column){}. Zmniejszenie tego naprawiło to. Uwaga: dotyczy to Chrome, nie znam innych przeglądarek.
Carl Smith
2
Wydaje się, że jest to powiązane: github.com/plumberjs/plumber-requirejs/commit/ ... ponieważ naprawiło to problem dla require.js
justingordon
1
Czy to możliwe, że gdzieś w procesie dodano wiersz nagłówka, np. Oświadczenie o prawach autorskich?
rogierschouten

Odpowiedzi:

3

Wystąpił błąd w Chrome, wypróbuj najnowszą wersję, również w konfiguracji pakietu internetowego spróbuj użyć różnych map źródeł w narzędziu devtool, wypróbuj wszystkie z nich, aby sprawdzić, czy działa dla wbudowanej mapy źródłowej:

  • inline-source-map

  • Cheap-inline-source-map

dla innych różnych konfiguracji:

  • tania-mapa-źródłowa

  • Cheap-module-source-map

  • Cheap-module-eval-source-map

w konfiguracji webpacka:

{

...

devtool:'source-map'

...

}
Agamennon
źródło