정적 애셋이있는 React 구성 요소를 npm에 게시하는 방법은 무엇입니까?

Question

React 구성 요소를 개발 중이며 npm에 게시하고 싶지만 CSS와 이미지와 같은 정적 애셋을 구성 요소와 함께 배포하는 방법에 대한 모범 사례를 찾을 수 없습니다. 음, 물론 모든 소스는 일반 js 및 일반 CSS로 transpil되어야합니다. js의 경우 모든 것이 간단합니다. 사용자는 그가 사용하는 모든 묶음과 함께 그것을 요구할 것입니다. 하지만 CSS의 경우에는 까다 롭습니다. 구성 요소를 CSS를 재정 의하여 쉽게 사용자 지정할 수 있기 때문에 인라인 스타일을 사용하고 싶지 않습니다. 그래서, 유일한 방법은 사용자가 node_modules에서 css 파일을 복사하여 SASS 또는 다른 선처리 프로세서로 가져 오기를 요구하는 것입니다. 하지만 내 CSS 파일에 다른 정적 애셋 (이미지, 글꼴 등)에 대한 참조가 있다면 어떻게 될까요? 경로가 완전히 엉망이 될 것 같아. 그래서, 나는 그것을 할 올바른 방법이 무엇인지에 관심이 있습니까? 사용자가 쉽게 사용하고 일반적인 함정을 피하는 방법?

Answer 1

정말 좋은 질문입니다. 내 대답이 당신이 기대하는 바가 아닌지 확신 할 수 없다. (기술적 인 것보다는 철학적 일 것이다.) 그러나 나는 그것이 좋은 출발점이라고 생각한다.

우선, 나는 그것을하는 "올바른 방법"이 없다고 생각합니다. 패키지를 유지 관리하는 팀 (단일 팀이 될 수 있음)을 상상해보십시오. 이름을 지정하는 방식은 자신에게 맞는 방식이며, 이는 "올바른 방법"입니다. 그래서, 물건을 명명하는 "표준"이 없으며, 당신이 옳다고 생각하는 방식으로 이름을 붙이며, 당신은 잘 가게됩니다.

이제 IMHO, 패키지를 사용할 사람들은 사용 방법에 대해 걱정해야합니다. 그 사람이 당신의 패키지에서 무엇을 사용하고 싶지는 않은지, 어떻게 사용하고 싶은지에 대한 선택권을 가질 수 있기 때문입니다.

예를 들어 webpack을 사용하는 경우 url-loader을 사용할 수 있습니다. 그러면 URL 문제가 해결됩니다.

webpack을 사용하지 않으면 패키지에 대한 일관된 문서와 사용 방법을 제공 할 수 있습니다. 사용자는 원하는 도구를 사용하여이를 따릅니다. 사용자가 자신의 워크 플로에 grep과 sed을 사용하려는 경우 해당 사용자가 제어 할 수 있기 때문에 괜찮습니다.

또한 이미지를 사용하는 스타일을 제공하려는 경우 프리 프로세서 또는 이와 유사한 것을 사용하고 사용자가 사물의 경로를 설정하기 위해 일부 변수를 사용자 정의 할 수 있습니다. 예를 들어, SASS를 사용하여 assets-path이라고 말하면 사용자는 $assets-path: '/path/to/assets/'을 추가하고 CSS를 컴파일해야합니다.

패키지를 사용할 때마다 "좋아요, 거기에 많은 것들이 있습니다. 나는 그것들 모두를 사용할 필요가 없습니다. 나는 원하는 것들을 사용할 것입니다"라고 생각하는 경향이 있습니다. 나는 당신의 패키지를 사용할 것이고 CSS 파일이있을 것이라는 것을 안다. 나는 훌륭한 도구 모음을 찾도록 노력할 것이다.

"표준"을 따르고 싶다면 github에서 가장 인기있는 반응 프로젝트를 확인해보십시오.하지만 앞서 말했듯이, 이름을 지정하는 방식은 그들에게 의미가있는 방식입니다. 그것은 당신에게 이해가되지 않을 수도 있습니다! :)

희망이 있습니다.