react 비계를 통해 새 프로젝트 만들기 (1)

현재 잘 알려진 비계는create-react-app와generator-z-react-cli가 있는데 쓸데없는 말은 하지 않고 바로 시작합니다.create-react-app 다운로드 및 전역 설치

npm install create-react-app -g

다음에 우리는 우리의 공사를 설치한다

create-react-app create-react-prj
cd .\create-react-prj\
npm start

설치가 완료되면 현재 디렉터리 구조를 볼 수 있습니다

create-react-prj
  |--build      //    ，        
  |   |-- index.html    //    
  |   |-- static        //    
  |
  |-- node_modules      //       ：          
  |
  |--src                //    
  |   |--index.js       //    (         ，     ，          )
  |
  |--public             //      
  |   |--index.html     //   (         ，     ，          )
  |
  |-- .gitignore        //git       ，            .idea(  webstorm        ，     )
  |--package.json   //            
  |--README.md      //    
  |-- ...

생성된 패키지입니다.json

{
  "name": "create-react-prj",
  "version": "0.1.0",
  "private": true,
  "dependencies": {  //=>     
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.0"
  },
  "scripts": {   //=>     
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

/*
 *        :
 *   $ npm run start      ，      ，       ，       ，         
 *   
 *   $ npm run build           ，   bulid             ，              
 *   
 *   $ npm run test     Jest        （   ） 
 *    
 *   $ npm run eject          
 *   
 *              yarn   
 */

여기에서 우리는create-react-app를 통해 새로 만든 프로젝트를 보았는데 디렉터리가 매우 우아하고 웹 패키지의 번잡한 설정이 없다. 비계가 이 설정들을 모두 숨겼기 때문이다. 만약에 우리가 웹 패키지 설정을 수정하려면 어떻게 처리해야 합니까?

    npm run eject

디렉토리 구조 변경

create-react-prj
  |-- config        //webpack         
  |     |--jest
  |     |  |--cssTransform.js
  |     |  |--fileTransform.js
  |     |--env.js
  |     |--paths.js
  |     |--polyfills.js
  |     |--webpack.config.dev.js
  |     |--webapck.config.prod.js
  |     |--webpackDevServer.config.js
  |
  |--scripts
  |   |-- build.js
  |   |-- start.js
  |   |-- test.js
             ，  webpack.config.dev.js、webpack.config.prod.js  ，             (           )

pakage.json의 디렉터리는 다음과 같습니다

{
  "name": "create-react-prj",
  "version": "0.1.0",
  "private": true,
  "dependencies": { //=>           （     ）        ，        webpack      
    "autoprefixer": "7.1.6",
    "babel-core": "6.26.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.2",
    "babel-preset-react-app": "^3.1.1",
    "babel-runtime": "6.26.0",
    "case-sensitive-paths-webpack-plugin": "2.1.1",
    "chalk": "1.1.3",
    "css-loader": "0.28.7",
    "dotenv": "4.0.0",
    "dotenv-expand": "4.0.1",
    "eslint": "4.10.0",
    "eslint-config-react-app": "^2.1.0",
    "eslint-loader": "1.9.0",
    "eslint-plugin-flowtype": "2.39.1",
    "eslint-plugin-import": "2.8.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-react": "7.4.0",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.5",
    "fs-extra": "3.0.1",
    "html-webpack-plugin": "2.29.0",
    "jest": "20.0.4",
    "object-assign": "4.1.1",
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.8",
    "promise": "8.0.1",
    "raf": "3.4.0",
    "react": "^16.2.0",
    "react-dev-utils": "^5.0.0",
    "react-dom": "^16.2.0",
    "redux": "^3.7.2",
    "style-loader": "0.19.0",
    "sw-precache-webpack-plugin": "0.11.4",
    "url-loader": "0.6.2",
    "webpack": "3.8.1",
    "webpack-dev-server": "2.9.4",
    "webpack-manifest-plugin": "1.3.2",
    "whatwg-fetch": "2.0.3"
  },
  "scripts": { //=>   eject  （          ，       ，       ）
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom"
  },
  "jest": { 
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "setupFiles": [
      "/config/polyfills.js"
    ],
    "testMatch": [
      "/src/**/__tests__/**/*.{js,jsx,mjs}",
      "/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "/node_modules/babel-jest",
      "^.+\\.css$": "/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "mjs",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

여기에서 우리는 eject라는 명령이 없어진 것을 볼 수 있다. 왜냐하면 이 명령은 거스를 수 없기 때문이다.
generator-z-react-clihttp://yeoman.io/1. 우선 npm 기반으로 전역에 yeoman 설치

npm install -g yo

그 다음에 전역적으로 비계를 설치한다

npm install -g generator-z-react-cli

최종 생성 항목

yo z-react-cli

디렉토리 구조:

my-app
  |-- index.html //   (  )
  |-- build //    ，        
  |    |-- index.html   //    
  |    |-- static       //       cdn,         
  |
  |-- src                     //    
  |    |--component           //   
  |    |      |-- common      //    
  |    |      |-- temp        //   
  |    |--Config              //    
  |    |--Image               //    
  |    |--Redux               //react-redux      
  |    |      |-- action.jsx  //     action
  |    |      |-- reducer.jsx //    action reducer
  |    |      |-- store.jsx   //     
  |    |-- Router           //  
  |    |-- Style            //  
  |    |-- template         //  html  
  |    |-- App.jsx          //js    
  |
  |-- webpack.config.hot       //     
  |-- webpack.config.buildt    //        
  |-- webpack.config.online    //        
  |-- server.js
  |-- server_hot.js    //         
  |-- .babelrc  //ES6      
  |-- package.json  //     
  |-- 

설치 의존이 오류를 보고했습니다
check python checking for Python executable "python2"in the PATH gyp verb which failed Error: not found:python2 그리고 저희가 구글을 하나 만들었어요.

npm --add-python-to-path='true' --debug install --global windows-build-tools
npm install --global node-gyp

실행 완료 후 오류 없이 설치 완료
npm run hot
프로젝트 전체 컴파일 배치, 테스트 환경 npm run buildt
프로젝트 전체 컴파일 배치, 온라인 환경 npm run online
이 특색은 바로 JSX 문법을 해석할 수 있고 ES6 문법의 새로운 특성을 해석할 수 있으며 LESS,SCSS 프로세서를 지원한다. 컴파일링이 완료되면 자동으로 브라우저를 열고 CSS 스타일 파일을 단독으로 분리한다. 파일 MD5 스탬프를 지원하고 파일 캐시 문제를 해결하며 그림, 아이콘 글씨체 등 소스를 지원한다. 브라우저 소스 디버깅을 지원하고 구성 요소급 핫 업데이트를 실현한다.코드의 핫 교체를 실현하고 브라우저가 실시간으로 리셋하여 효과를 보고 개발 환경과 생산 환경을 구분하여 업무 기능 코드와 공공 의존 코드를 분리하는 것이 뚜렷하다. 이 비계는 더욱 강력한 기능을 통합시켰다.