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
도 사용하고 있기 때문에 import
는 require
로 변환됩니다만, 이것은 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 간의 차이를 채울 수 있습니다.
실제로 시도하고 정확하게 작동했습니다! !
Reference
이 문제에 관하여(babel 의 import 로 지정하는 패스가 잘못되어도 움직여 버린다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sakamotoryouta/items/73aa1f83c06ca70e6201
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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')
);
Reference
이 문제에 관하여(babel 의 import 로 지정하는 패스가 잘못되어도 움직여 버린다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sakamotoryouta/items/73aa1f83c06ca70e6201텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)