react 프로젝트 구축

앞 에 쓰다
react 프로젝트 를 구축 할 때마다 많은 물건 을 배치 하고 시간 이 지나 면 어떻게 설정 하 는 지 잊 어 버 립 니 다.자신의 기억 을 편리 하 게 하기 위해 다른 개발 자 들 이 react 응용 을 구축 할 때 신속하게 개발 할 수 있 도록 이 기록 을 만 들 었 습 니 다.
본 프로젝트 는create-react-app 비 계 를 배치 합 니 다.주로 웹 팩 과 같은 프로젝트 개발 에 자주 사용 되 는 방법 을 설정 하 였 습 니 다.sass ， redux 、 、 및 기타 공구 창고 의 도입 등.
항목 초기 화
우선, create - react - app 을 이용 하여 react 프로젝트 를 만 들 려 면 참고 할 수 있 습 니 다.https://github.com/facebookin...
설치 create-react-app

npm install -g create-react-app

프로그램 만 들 기

create-react-app my-app
cd my-app

주: my - app 는 항목 의 이름 을 말 합 니 다. 사용 자 는 항목 의 이름 을 사용자 정의 할 수 있 습 니 다.
이 럴 때 명령 줄 에 입력 할 수 있 습 니 다.npm start: 프로젝트 를 시작 하면 프로젝트 시작 페이지 를 볼 수 있 습 니 다.npm run build: 프로젝트 발표.
이렇게 간단 한 react 프로젝트 가 초기 화 되 었 습 니 다.
그러나 기본 설정 은 숨겨 져 있 습 니 다. 설정 을 사용자 정의 하려 면 명령 을 실행 해 야 합 니 다. npm run eject 이 때 이 명령 은 거 스 를 수 없습니다. 계속 할 지, y 를 입력 하면 모든 설정 항목 이 나 옵 니 다.config 폴 더 를 만 들 것 입 니 다. 이 럴 때 맞 춤 형 설정 도 할 수 있 습 니 다.
프로젝트 설정
호환성 IE
도입 element-react UI 프레임 워 크 가 잘못 보 고 됩 니 다 ReferenceError: “Symbol”

해결 방안:

프로젝트 에 도입 babel-polyfill, app. js 에서 가 져 오 면 됩 니 다.
웹 팩 설정
웹 팩 기반 설정
sass 설정
비 계 는 기본적으로 sas 를 설정 하지 않 았 습 니 다. 프로젝트 에서 sas 를 사용 하려 면 따로 설정 해 야 합 니 다.
1. 설치 의존 npm install --save-d node-sass sass-loader 2. config 아래 webpack.config.dev.js 와 webpack.config.prod.js 를 수정 하고 개발 환경 과 발표 환경 은 단독 설정 입 니 다.
cssloader 수정 test: /\.css$/,: test: /\.(css|scss|sass)$/, 즉 scss / ass 파일 인식
마지막 으로 추가 sass-loader별명 설정
별명 은 프로젝트 에서 우리 가 파일 을 빠르게 도입 하 는 데 편리 하 다.예 를 들 어 우리 프로젝트 에 src / util / tools 라 는 공공 파일 디 렉 터 리 가 있 습 니 다. 예 를 들 어 다음 과 같은 파일 구조 가 있 습 니 다.

├── src                                   
│   ├── assets                            #     
│   │   └── ...
│   ├── containers                        #     
│   │   └── pages
│   │       └── pageA                     #   A     
│   │           └───a.js                  # a.js           
│   │── utils                             #      
│   │   └── tools
│   ├── index.js                          # webpack      

층 이 깊 은 구성 요소 내부 a.js 에서 tools 파일 을 도입 해 야 합 니 다. ../../../util/tools 파일 의 상대 적 인 위 치 를 찾 을 수 있 지만, 웹 팩 설정 의 별명 을 사용 하면 /src 디 렉 터 리 로 직접 찾 을 수 있 습 니 다.

//      
import tools from '../../../util/tools';

//      
import tools from '@/util/tools';  // '@/'    'src/'

구성 방식
dev 와 prod 환경 모두 설정 이 필요 합 니 다.
resolve / alias 에서 설정 하기
그 중 resolve 은 사용자 정의 함수 이다.

function resolve(dir) {
    return path.join(__dirname, '..', dir)
}

쓰다

'@': path.join(__dirname, '..', 'src')

열 로드 설정create-react-app 프로젝트 에 열 로드 가 설정 되 어 있 습 니 다. 프로젝트 입구 파일 index.js 에서 열 로드 를 사용 하면 됩 니 다. 바로 끝 에 추가 합 니 다.

// index.js
/*     */
if (module.hot) {
  module.hot.accept();
}

프 록 시 설정
전단 개발 에서 요청 인 터 페 이 스 는 항상 도 메 인 을 뛰 어 넘 는 문제 에 부 딪 히 고 도 메 인 을 처리 하 는 방식 이 많 습 니 다. 대부분의 웹 팩 은 dev 를 설정 합 니 다.server, 그러나 이 방법 은 create - react - app 에서 생 성 된 응용 프로그램 에서 유효 하지 않 습 니 다. 이 응용 프로그램 은 package. json 에서 대리 해 야 합 니 다.

// package.json
"proxy": "http://api.enjoycut.com/"

//   
"proxy": {
    "/article": {
      "target": "http://api.enjoycut.com/",
      "changeOrigin": true,
      "secure": false
    }
  }
//           

경로 설정
react - router 4 의 사용 방식 은 이전 router 버 전과 다 릅 니 다.
react - router 4 문서 주소
redux 설정
장식 기 설정 @connect프로젝트 에서 직접 @ connect 방식 으로 redux 에 접근 할 수 있 습 니 다.
설정 되 지 않 음
배치 후
설명 이 필요 한 것 은 이곳 에 장식 기 를 사 용 했 기 때문에 모듈 babel-plugin-transform-decorators-legacy 을 설치 해 야 한 다 는 것 이다.
그리고 package. json 에 설정 plugins프로젝트 의 다른 도구 설정classnames
react 에서 className 을 전환 하 는 것 은 비교적 번 거 롭 습 니 다. 간단하게 세 가지 연산 을 사용 할 수 있 지만 복잡 한 class 는 비교적 번 거 롭 습 니 다. 예 를 들 어 이 약간 복잡 한 div 동적 으로 여러 개의 className 을 전환 하고 도구 라 이브 러 리 를 추천 합 니 다. 간단 하고 편리 하 게 className 을 전환 할 수 있 습 니 다.
clsssnames 문서 사용

      

      //   classNAme： 'clip_item'
      // isActive    === true    className 'clip_active'
      // is_dragging === true    className 'dragging' 
 
moment
 
 
             ，               ！    。
 
 
moment().format('MMMM Do YYYY, h:mm:ss a'); //    10  2018, 7:04:30   
moment().format('dddd');                    //    
moment().format("MMM Do YY");               // 9  10  18
moment().format('YYYY [escaped] YYYY');     // 2018 escaped 2018
moment().format();                          // 2018-09-10T19:04:30+08:00
  
moment. js 문서 주소:http://momentjs.cn/ 
프로젝트 후기 최적화
antd 필요 에 따라 불 러 오기
일반적인 상황 에서 저 희 는 antd 홈 페이지 사용 방식 에 따라 css 에서 ui 의 전체 스타일 을 가 져 옵 니 다. @import '~antd/dist/antd.css'; 예 를 들 어 저 희 는 프로젝트 에서 Button 과 Table 만 사 용 했 습 니 다. 그러나 실제 적 으로 모든 antd 구성 요소 의 스타일 을 불 러 왔 습 니 다 (전단 성능 에 위험 합 니 다).따라서 필요 에 따라 불 러 오고 사용 한 구성 요소 스타일 만 불 러 와 야 합 니 다.
메모: eject 를 실행 했다 면, webpack 은 babelrc: false 를 설정 하 였 습 니 다. 단독 루트 디 렉 터 리 를 새로 만 들 었 습 니 다. babelrc 는 잘못 보고 할 수 있 습 니 다. webpack. dev. js 설정 이 필요 합 니 다. module 모듈, loader: require. resolve ('babel - loader') 대상 의 plugins 배열 에 추가 해 야 합 니 다.
웹 팩 설정 파일 을 노출 시 킬 수 있 는 설정 방식 만 보 여 줍 니 다. 웹 팩 설정 방식 은 노출 되 지 않 았 습 니 다. 참고 하 십시오.https://segmentfault.com/a/11... 
 babel - plugin - import 설치 npm install --save-dev babel-plugin-import 
 웹 팩 의 babel - loader plugins 에 babel - plugin - import 
두 개의 파일 / config / webpack. config. prod. js 와 / config / webpack. config. dev. js (수 정 된 내용 과 마찬가지 로 업 그 레이 드 된 create - react - app 를 하나의 파일 로 합 쳐 webpack. config. js) 를 수정 하여 babel - loader 를 불 러 오 는 곳 을 찾 아 그의 plugins 에 다음 코드 를 추가 해 야 합 니 다.
[
    require.resolve('babel-plugin-import'),//    import   
    {
      libraryName: 'antd',   //  antd
      style: 'css'
    }
  ]
  
마지막 으로 형 성 된 설정 은 다음 과 같 습 니 다. (create - react - app 버 전 에 따라 마지막 설정 이 다 를 수 있 습 니 다. 원리 가 같 습 니 다)
   // Process application JS with Babel.
    // The preset includes JSX, Flow, TypeScript, and some ESnext features.
    {
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      include: paths.appSrc,
      loader: require.resolve('babel-loader'),
      options: {
        customize: require.resolve(
          'babel-preset-react-app/webpack-overrides'
        ),
        
        plugins: [
          [
            require.resolve('babel-plugin-named-asset-import'),
            {
              loaderMap: {
                svg: {
                  ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
                },
              },
            },
          ],
          // antd    
          [
            require.resolve('babel-plugin-import'),//    import   
            {
              libraryName: 'antd',   //  antd
              style: 'css'
            }
          ],
        ],
        // This is a feature of `babel-loader` for webpack (not Babel itself).
        // It enables caching results in ./node_modules/.cache/babel-loader/
        // directory for faster rebuilds.
        cacheDirectory: true,
        cacheCompression: isEnvProduction,
        compact: isEnvProduction,
      },
    },
  
코드 구분 (react - loadable)
로 딩 구성 요소 의 고급 구성 요 소 를 동적 으로 가 져 옵 니 다.
사용 전
import Home from'./Home';
  
사용 후
import loadable from '@/utils/loadable'
const Home = loadable(() => import('./Home '));
  
loadable 구성 요소
import React from 'react';
import Loadable from 'react-loadable';

//       
const loadingComponent =()=>{
  return (
    

  )
};

//           ，    loading，          
export default (loader,loading = loadingComponent)=>{
  return Loadable({
    loader,
    loading
  });
}
 
 
    
 
 
      (Prerender SPA Plugin)
 
 

                  html   （  ：                  html）。      html         。 
 
 
 
                         。               html，      ，              js。   html root      。                   。
 
 
    
 
 
1.npm install prerender-spa-plugin
 
 
2.   /config/webpack.config.prod.js  
 
 
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  plugins: [
    ...
    new PrerenderSPAPlugin({
      // Required - The path to the webpack-outputted app to prerender.
      staticDir: path.join(__dirname, '../build'),
      // Required - Routes to render.
      routes: ['/home', '/convert', '/trim', '/merge', '/watermark', '/remove', '/download'],
    })
  ]
}
  
3. 경 로 를 추가 하려 면 routes 에 추가 하고 백 엔 드 에서 ngnix 설정 을 변경 해 야 합 니 다.
/ -> home/index.html
/home -> home/index.html
/convert -> convert/index.html
/trim -> trim/index.html
/merge -> merge/index.html
/watermark -> watermark/index.html
/remove -> remove/index.html
/download -> download/index.html

       ，         index.html
  
단일 페이지 응용 다 중 경로 미리 렌 더 링 안내https://juejin.im/post/59d49d976fb9a00a571d651d사용 설명https://github.com/chrisvfritz/prerender-spa-plugin 
소스 코드
프로젝트 를 빠르게 구축 하 는 데 편리 하도록 이 예 는 모든 설정 코드 를 github 프로젝트 에 두 었 습 니 다.https://github.com/zhaosheng8...