[javascript] create-react-app는 src 디렉토리 외부로 제한을 가져옵니다.

이것은 create-react-app 개발자가 추가 한 특별한 제한 사항입니다. ModuleScopePlugin파일이에 있도록하기 위해 구현 되었습니다 src/. 이 플러그인을 사용하면 앱의 소스 디렉토리에서 상대적인 가져 오기가 외부로 도달하지 않습니다.

ejectcreate-react-app 프로젝트를 실행 한 후에 만이 기능을 비활성화 할 수 있습니다 .

대부분의 기능과 업데이트는 create-react-app 시스템 내부에 숨겨져 있습니다. eject당신이 더 이상 일부 기능과 업데이트가 없습니다 만들 경우 . 따라서 웹팩 등을 구성하는 데 포함 된 응용 프로그램을 관리하고 구성 할 준비가되지 않은 경우 eject작업을 수행하지 마십시오 .

기존 규칙에 따라 재생합니다 (src로 이동). 그러나 이제 제한을 제거하는 방법을 알 수 있습니다 : webpack 구성 파일에서 do eject및 removeModuleScopePlugin .

이후 생성이-반응 – 응용 프로그램 v0.4.0NODE_PATH 환경 변수는 절대 수입 경로를 지정할 수 있습니다. 그리고 v3.0.0 NODE_PATH 은 or baseUrl에서 설정하기 위해 더 이상 사용되지 않습니다 .jsconfig.jsontsconfig.json

절대 가져 오기를 사용하면 기본 URL에 지정된 값을 기준으로 import App from 'App'대신 사용할 수 있습니다 import App from './App'.

이 기능은 monorepos 또는 기타 구성 질문에 특히 유용하지만 public폴더 에서 이미지 나 다른 것을 가져 오는 데는 유용하지 않습니다 .

public폴더의 내용은 폴더에 배치 build되고 상대 URL로 제공됩니다. 또한 가져온 모든 내용은 webpack에서 처리되며 build폴더 에도 저장됩니다.

public폴더 에서 무언가를 가져 오면 아마도 그 것이 폴더에 복제 build되고 두 가지 다른 URL (또는 다른로드 방법)로 사용 가능하게되어 궁극적으로 패키지 다운로드 크기가 악화됩니다.

src 폴더 에서 가져 오는 것이 바람직하며 장점이 있습니다. 모든 것은 웹팩에 의해 최적의 크기 와 최적의 로딩 효율을 위해 덩어리로 번들에 포장 될 것입니다 .

중간 솔루션, 즉있다 재배 선에 프로그래밍 방식으로 웹팩 설정을 수정할 수 있습니다 시스템은. 그러나 플러그인을 제거 하는 것은 좋은 해결책 이 아닙니다 . 와 비슷한 완전히 작동하는 추가 디렉토리를 추가하는 것이 좋습니다 .ModuleScopePluginsrc

현재 루트 폴더 create-react-app이외의 추가 디렉토리는 지원하지 않습니다 src. 이것은 react-app-rewire-alias를 사용하여 수행 할 수 있습니다

답변

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

module.exports = function override(config, env) {
    config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));

    return config;
};

"/images/logo_2016.png"

'../../public/images/logo_2016.png'; 

<img className="Header-logo" src="/images/logo_2016.png" alt="Logo" />

"scripts": {
    - "start": "react-scripts start"
    + "start": "react-app-rewired start",
    ...
},

const { removeModuleScopePlugin } = require('customize-cra')

module.exports = removeModuleScopePlugin()

module.exports = {
  webpack: {
    configure: webpackConfig => {
      const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
        ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
      );

      webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);
      return webpackConfig;
    }
  }
};