Ruby on Rails, Webpack 및 React JS를 사용하여 Chrome에서 한 줄씩 소스 맵

inline-source-mapChrome devtools 디버거를 사용할 때 구성 설정을 사용하여 Webpack에서 생성 한 소스 맵이 한 줄씩 꺼지는 문제가 있습니다. Webpack은 Ruby on Rails 애플리케이션 내부에 설정되어 수십 개의 모듈로 구성된 연결되고 축소되지 않은 JavaScript 파일을 생성합니다. 대부분의 모듈은 ReactJS 구성 요소이며 jsx로더에 의해 구문 분석됩니다 . Webpack의 출력은 application.jsgem에서 생성 한 다른 JavaScript 라이브러리와 함께 파일에 포함됩니다 .

를 사용하면 eval-source-map문제가 없습니다. 의 사용에 대한 무언가로 inline-source-map인해 줄 번호가 하나씩 버려집니다.

React 컴포넌트가 아닌 JavaScript를 검사하는 것은 여전히이 문제가 있으므로 jsx 사용과 관련이 없다고 생각합니다.

— Paradasia
소스

한쪽 라인으로 첫 번째 줄을 고려 것처럼 소리 0, 다른 하나는이 라인 간주합니다 1. 하나의 정의를 선택하고 다른 방식으로 작동하는 모든 값을 조정해야 할 수도 있습니다.

— Carl Smith

브라우저가 소스 맵의 줄 번호에 사용하는 값을 조정하는 방법이 있다면 잠재적으로 문제를 해결할 수 있습니다. 또한 그 이후로 약간의 노력을 기울였으며 Sprockets없이 Rails를 사용하여 webpack에서 생성 한 JS를 처리하면 문제가 해결되는 것 같습니다. 줄 번호는 웹팩과 스프로킷을 모두 사용할 때만 꺼집니다.

— paradasia 2015 년

모르겠어요. 나는 Mozilla의 소스 맵 JS 라이브러리와 함께 CoffeeScript의 소스 맵을 사용하고있었습니다. column다음 코드 의 arg가 1 너무 높게 전달 된다는 점을 제외하고는 모든 것이 정상입니다 window.onerror = function(message, url, line, column){}.. 그것을 줄이면 수정되었습니다. 참고 : Chrome에만 해당되며 다른 브라우저에 대해서는 잘 모릅니다.

— 칼 스미스

이 관련이 보인다 : github.com/plumberjs/plumber-requirejs/commit/...를 이 require.js에 대한 prolblem 고정 점에서

— justingordon

프로세스 어딘가에 저작권 문구와 같은 헤더 라인을 추가 할 수 있습니까?

— rogierschouten

크롬에 버그가 있었고, 최신 버전을 사용해보세요. 또한 웹팩 설정에서 devtool에서 다른 소스 맵을 사용해보십시오. 인라인 소스 맵에서 작동하는지 확인하려면 다음을 모두 시도해보십시오.

인라인 소스 맵
저렴한 인라인 소스 맵

다른 다른 구성의 경우 :

저렴한 소스 맵
저렴한 모듈 소스 맵
저렴한 모듈 평가 소스 맵

webpack 구성에서 :

{

...

devtool:'source-map'

...

}

— Agamennon
소스