어떻게create-react-app를 금상첨화하여 실제 수요를 만족시킬 수 있습니까?

reate-react-app는 React 공식이 우리에게 제공한 한 페이지 응용 비계로 웹 패키지를 바탕으로 관련 기능을 설정했다.babel, 이미지 처리, 열 로드, css 모듈화, css 프로세서 변환, 코드 분리, 생산 구축, 테스트 등이다.문서는 여기create-react-app에 있습니다.한번 가보자고 강력히 건의하다.
프로젝트를 보다 잘 관리하려면 로컬 설치npx create-react-app myapp를 사용하는 것이 좋습니다.
앞부분
어느 정도에 공식적으로 제공된 비계는 완벽에 가까워졌고, 그 다음에 그것을 더욱 완벽하게 확장시켰다.
비계는 기본적으로 웹 패키지 등 번거롭고 복잡한 설정을 숨겨 개발자가 프로젝트에 전념하도록 한다.그러나 관련 설정을 폭로하기 위한 명령npm run eject도 제공했지만 이 행위는 거스를 수 없다.
우리가 해야 할 일은 금상첨화로 관련 배치를 노출하지 않고 진행하는 것이다.
기본 부트 포트 번호 수정: 3000
실제에서 예를 들어 여러 개의 응용 프로그램이 있다면 포트 번호 충돌은 매우 흔히 볼 수 있는 것이다. 그러면 어떻게 기본 포트 번호를 수정합니까?

설치npm install --save-dev cross-env, 호환성을 보증합니다. 윈도우는 직접PORT=5000 node scripts/start.js

을 지원하지 않기 때문입니다.

package.json 파일에 명령을 시작하기 전에 가입하기 cross-env PORT=

"scripts": {
    "start": "cross-env PORT=5000 node scripts/start.js"
  },

라이브러리 설치

axios

react-router-dom

redux、react-redux

antd

...

패키지된 리소스 경로를 상대 경로로 수정
실제 응용에서 포장된 자원은 상대적인 경로를 사용해야 한다package.json에서 다음과 같이 설정하면 된다.

{
    "scripts": {
        ...
    },
    "homepage": "."
}

웹 패키지 구성 확장
react-app-rewired를 사용하여 이 도구를 설치한 후 프로젝트 루트 디렉터리에 새 파일config-overrides를 만듭니다.js 파일.이 때 우리는 그 중에서 각종 웹 패키지의 설정을 진행할 수 있다.
하지만!react-app-rewired2.x 이후에 injectBabelPlugin 방식을 지원하지 않기 때문에customize-cra를 설치해야 합니다.
구체적으로ant디자인 공식 문서에서 최신 해결 방안을 제시했습니다.가서 자세히 보십시오.https://ant.design/docs/react/use-with-create-react-app-cn
이런 방식이 바로 우리가 추천하는 방식이다.더 많은 추가 파일을 만들 필요가 없을 뿐만 아니라, 설정도 더욱 간단하고 제어할 수 있는 방식으로 바뀌기 때문이다.
구체적인 절차:
먼저 react-app-rewired를 설치합니다.

npm install react-app-rewired --save-dev

그리고 패키지 수정.json 파일은 다음과 같습니다.

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

그런 다음 customize-cra를 설치합니다.

npm install customize-cra --save-dev

그리고 루트 디렉터리에 config-overrides를 추가합니다.customize-cra 문서를 참조하도록 js 파일을 구성하고 구성합니다.

react 프로젝트에서 가장 자주 사용하는 구성 요소 라이브러리 antd를 설정해야 합니다:

babel-plugin-import를 사용합니다. 이것은 구성 요소 코드와 스타일을 불러오는 데 사용되는 babel 플러그인입니다.

npm install babel-plugin-import --save-dev

웹팩을 구성하려면:

/* config-overrides.js */
+ const { override, fixBabelImports } = require('customize-cra');

+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

antd 사용자 정의 테마

설정 테마의 요구에 따라 사용자 정의 테마는less 변수 덮어쓰기 기능을 사용해야 합니다.
less와less-loader 설치

npm install less less-loader --save-dev

웹팩을 구성하려면:

/* config-overrides.js */
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);

여기는less-loader의modifyVars를 이용하여 테마 설정을 진행합니다.물론 여기의modifyVars의 값도theme 파일일 수 있습니다.

포장한 후에 정적 폴더에 css와 js의 맵 파일이 많이 있는 것을 발견할 수 있습니다. 그러면 소스맵을 어떻게 닫아야 합니까?

/* config-overrides.js */
const { override, fixBabelImports, addLessLoader } = require("customize-cra");

+ process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  fixBabelImports("import", {
    libraryName: 'antd',
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  })
);

추가 구성

const { override, fixBabelImports, addLessLoader, addWebpackAlias, useBabelRc, addDecoratorsLegacy, addWebpackPlugin } = require('customize-cra');
const path = require('path')

//   ：     ，        
const WebpackBuildNotifierPlugin = require('webpack-build-notifier');

//    sourcemap
process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  //     
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    // style: 'css' //     
    style: true // antd       less
  }),
  // antd       less           less、less-loader
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#814a96'
    }
  }),
  //     
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
    'components': path.resolve(__dirname, 'src/components'),
    'pages': path.resolve(__dirname, 'src/pages')
  }),
  //     .babelrc    Babel  。
  useBabelRc(),
  //        @babel/plugin-proposal-decorators
  addDecoratorsLegacy(),
,
  //         
  addWebpackPlugin(new WebpackBuildNotifierPlugin({
    title: "My Project Webpack Build",
    logo: path.resolve("./img/favicon.png"),
    suppressSuccess: true
  }))
)

npm install @babel/plugin-proposal-decorators --save-dev

npm install webpack-build-notifier --save-dev

proxy 프록시
프런트엔드 도메인 간 처리
src 디렉토리에서 새 파일 setupProxy.js
http-proxy-middleware 설치:

npm install http-proxy-middleware --save-dev

setupProxy를 구성합니다.js

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api', {
      target: 'http://xx.xx.xx.xx:8000/',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  )
}

IE9 호환
create-react-app에서 공식적으로 제공하는react-app-polyfill을 사용하고 입구 파일 index.js에서 도입

npm install react-app-polyfill --save

import 'react-app-polyfill/ie9'

백엔드 섹션
실제 작업에서 수요가 확정된 후에 전후단은 동시 개발된 경우가 많다. 인터페이스의 제공에 있어 후단은 제때에 이루어지지 않는다. 그러나 이때 전단은 어떻게 후단 인터페이스가 없는 상황에서 정상적으로 개발할 수 있고 기능의 정상을 보장할 수 있겠는가?
답은:mock 데이터.
그러면 어떻게 mock 데이터를 만드는가, 방식이 매우 많다. 예를 들어 easymock 온라인 아날로그 인터페이스 데이터를 이용하는 것이다. 물론 가장 좋은 방법은 스스로 node 서비스를 구축하고 아날로그 인터페이스와 데이터를 구축하는 것이다. 더욱 유연하고 기술을 향상시키며 백엔드의 지식을 이해하고 더 좋은 소통과 교류를 할 수 있다.
src 디렉터리에 새 폴더 서버-node를 만들고 다음에 index를 만듭니다.js를 입구 파일로 합니다.
라이브러리 설치

koa

koa-router

koa-body

...

koa 관련 지식은 스스로 배우세요.
재부팅, 핫 로딩
프런트엔드와 마찬가지로 파일을 변경하면 자동으로 재부팅됩니다.
nodemon 설치:

npm install nodemon --save-dev

패키지를 구성합니다.json

scripts: {
  server: 'nodemon server-node/index.js'
}

대충 이 정도입니다. 더 좋은 조언이나 구성이 있으면 많은 지도 부탁드립니다~~