yeoman 프로젝트 파일 비계 생성 (react)

원문과 코드는 여기에 찍으세요
 
React+Backbone의 통합 개발을 준비하고 있습니다. 동료가 전에 맞춤형 Backbone의 비계를 만들었습니다. 저는 오늘 React를 하러 왔습니다.
준비 작업, Node 설치, Yoman은 더 이상 말하지 않겠습니다. 뭐라고요?할 줄 모르다너는 무슨 사용자 정의 비계를 하느냐, 우선 스스로 구글에 가라
1. 설치 디렉터리 내 디렉터리는 홈/mike/mywork/study/gitcode/
2.generator 설치 설치: ：npm install -g generator-generator 설명: yo generator 생성기 새 생성기 마법사 yo generator:subgenerator Name Name 이름의 하위 생성기
1단계: yo generator 마법사의 알림에 따라 입력하면 내generator의 이름은reacttiny입니다. 첫 번째는github 이름(쓰지 않아도 돼)을 쓰고 두 번째는reacttiny를 쓰면 됩니다. 그리고 다른 기본값은 다음과 같은generator-reacttiny 디렉터리 생성을 기다립니다.

.
├── generators
│   └── app
│       ├── index.js
│       └── templates
│           ├── _bower.json
│           ├── _package.json
│           ├── editorconfig
│           └── jshintrc
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .jshintrc
├── .travis.yml
├── .yo-rc.json
├── package.json
├── README.md
└── test
    └── test-app.js

단계2: 이때 cd는generator-reacttiny 디렉터리에 들어가면 :npm link 명령줄에서 이 생성기를 사용할 수 있습니다.
STEP3: 이때 ：yo reacttiny 한 번 시도해 보면 여맨 할아버지를 볼 수 있어요...
우리는 당연히 앱의 index에서 우리의 생성기를 직접 개발할 수 있다. 사용할 때 yo reacttiny를 직접 사용하면 된다. 그러나 나는 몇 개의 사용자 정의 생성기를 만들어야 한다. 그러면 어떡하지?
4단계: 명령행 디렉터리는generator-reacttiny에 있습니다. yo generator:subgenerator react 주의, yo generator:subgenerator는 명령이고, react는 우리 하위 생성기의 이름입니다.이후generators 디렉터리에서 상응하는 템플릿 파일을 자동으로 생성하여 app 디렉터리와 똑같습니다. 이때 폴더 이름은react라고 합니다.
5단계: 이때react 디렉터리에서 개발할 수 있습니다. 사실 비계는 사용자가 컨트롤러의 입력에 따라 템플릿 파일을 작성하고 마지막에 템플릿 파일을 생성하는 데 목적이 있습니다.
3. 사용한 가방은handlerbars,open,react,rimraf,chalk,mocha,yosay,yeoman-generator
4.generator 방법의 실행 순서
자동적으로 실행될 함수에 대해 그들은 우선순위가 있는데, 아래의 함수들은 순서대로 하나씩 실행된다.
initializing - 당신의 초기화 함수는 구조 함수입니다. 주로 매개 변수 같은 것을 검사하는 것입니다.
prompting - 메뉴를 보여주고 뭘 고르는 거
configuring - 구성 정보를 저장하고 유사하게 만듭니다.editorconfig 파일default - 기본값입니다. 이 목록에 없는 함수만 이 위치에서 실행됩니다. writing - 템플릿 파일 만들기conflicts - 예외 및 충돌 처리install - npm과 bower에 의존하는 척end - 명령줄을 쳐서 사용자의 성공을 축하합니다5. npm에 이 가방을 npm에 업로드하려면 명령줄에 있는generator-reacttiny 디렉터리에 npm adduser 무등록 사용자를 입력하고 알림 절차에 따라 먼저 개인 사용자npm login를 추가하여 등록하고 사용자가 먼저 로그인npm publish --access=publish 발표하면 됩니다
PS:grunt에 Jsx 파일 자동 컴파일 플러그인을 추가하기 전에yeoman을 사용하여 프로젝트를 구축합니다
1. Gruntfile에서.js 파일 디렉터리에grunt-react와grunt-browserify ：npm install grunt-react --savenpm install grunt-browserify --save 설치
2. Gruntfile에서.js의watch에 다음 코드를 추가하여 jsx 코드를 자동으로 감청하여 js 코드에 react의 jsx 디렉터리를 지정합니다

watch: {
      react:{
        files: ['<%= config.app %>/react/{,*/}*.jsx'],
        tasks: ['react:dynamic_mappings', 'react:single_js_files']
      },
      browserify:{
        files: ['<%= config.app %>/react/{,*/}*.jsx'],
        tasks: ['browserify:options']
      }
}

3. Gruntfile에서.js의 initConfig에 react와browserify가 지정한 react의 jsx 디렉터리와 js의 출력 디렉터리를 추가합니다

 grunt.initConfig({
react: {
      single_js_files: {
        files: {
          '<%=config.app%>/react/output/hello.js': '<%=config.app%>/react/hello.jsx'
        }
      },
      combined_file_output: {
        files: {
          'path/to/output/dir/combined.js': [
            'path/to/jsx/templates/dir/input1.jsx',
            'path/to/jsx/templates/dir/input2.jsx'
          ]
        }
      },
      dynamic_mappings: {
        files: [
          {
            expand: true,
            cwd: '<%=config.app%>/react',
            src: ['**/*.jsx'],
            dest: '<%=config.app%>/react/output',
            ext: '.js'
          }
        ]
      }
    },
    browserify: {
      options: {
        transform: [ require('grunt-react').browserify ]
      },
      app: {
        src: '<%= config.app %>/react/hello.jsx',
        dest: '<%= config.app %>/react/output/dist/hello.js'
      }
    },
});

4. Gruntfile.js에 다음 두 줄을 추가하여 두 개의 작업을 불러옵니다

grunt.loadNpmTasks('grunt-react');
grunt.loadNpmTasks('grunt-browserify');

5. grunt:serve에'react'와'browserify'를 더하기

grunt.registerTask('serve', 'start the server and preview your app', function (target) { if (target === 'dist') { return grunt.task.run(['build', 'browserSync:dist']);
    }

    grunt.task.run([ 'clean:server', 'wiredep', 'concurrent:server', 'postcss', 'browserSync:livereload', 'watch', 'react', 'browserify'  ]);
  });

6. 기본 작업에 grunt --verbose --force 를 추가하면 파일 생성의 세부 사항을 볼 수 있습니다

grunt.registerTask('default', [
    'newer:eslint',
    'test',
    'build',
    'react',
    'browserify'
  ]);

참조: 1.generator-generator 2. yeoman 3. grunt-react