[javascript] 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 사용과 관련이 없다고 생각합니다.
답변
크롬에 버그가 있었고, 최신 버전을 사용해보세요. 또한 웹팩 설정에서 devtool에서 다른 소스 맵을 사용해보십시오. 인라인 소스 맵에서 작동하는지 확인하려면 다음을 모두 시도해보십시오.
-
인라인 소스 맵
-
저렴한 인라인 소스 맵
다른 다른 구성의 경우 :
-
저렴한 소스 맵
-
저렴한 모듈 소스 맵
-
저렴한 모듈 평가 소스 맵
webpack 구성에서 :
{
...
devtool:'source-map'
...
}