babel 의 import 로 지정하는 패스가 잘못되어도 움직여 버린다.

import에 지정하는 경로는 case insensitive??



webpack이라든지 React라든지 Express로 놀고 있었을 때였습니다.
아래와 같은 코드를 쓰고 있었습니다만, 브라우저로 동작시켰을 때는 확실히 동작하고 있었습니다.
(Hello 구성 요소가 올바르게 표시되었습니다)
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Hello from './components/Hello';

ReactDOM.render(
  <Hello compiler="TypeScript" framework="React" />,
  document.getElementById('app')
);

그러나 React 등과는 관계없는 webpack에 적용한 플러그인이 제대로 작동하지 않았습니다.
꽤 고민했는데, import Hello from './components/Hello';components 곳을 Components 로 하면 제대로 움직이게 되었습니다.
확실히 올바른 패스는 Components 입니다만, 반대로 React는 왜 동작하고 있었는지 수수께끼였습니다.

원인



조사해도 정보는 나오지 않았으므로, 이하 완전하게 추측입니다.
babel 도 사용하고 있기 때문에 importrequire 로 변환됩니다만, 이것은 node.js 의 시스템인 것 같습니다.
그래서 require 는 OS의 파일 시스템에 의존하고 있지 않을까 ~라고 생각합니다.
치라 호라 그런 Issue를 보았으므로 ...
htps : // 기주 b. 코 m / ぇ b pack - 혼 티 b / css - ぉ 아데 r / 이스에 s / 53

그래서, 내 사용하고 있는 OS는 Mac이므로 case insensitive 로 동작해 버렸다····라고 추측하고 있습니다.

ESlint도 도입하고 있지만 오류를 표시하지 않습니다 ...
뭔가 좋은 손이 없을까

추가 (2018/05/04)
npm에게 경로를 확인해주는 좋은 느낌을 찾았습니다.
case-sensitive-paths-webpack-plugin입니다.

This Webpack plugin enforces the entire path of all required modules match the exact case of the actual path on disk. Using this plugin helps alleviate cases where developers working on OSX, which does not follow strict path case sensitivity, will cause conf build boxes running other operating systems which require correctly cased paths.

위의 설명에서 알 수 있듯이 경로가 정확하게 설명되었는지 확인합니다.
이렇게하면 OS 간의 차이를 채울 수 있습니다.
실제로 시도하고 정확하게 작동했습니다! !

좋은 웹페이지 즐겨찾기