2014-12-03 2 views
0

코드베이스가 JSX Transformer를 사용하여 점차 React 프레임 워크쪽으로 이동합니다.RequireJS - 플러그인을 기본 로더로 만들기

JSX 변압기는 일반적인 자바 스크립트 파일 및 자바 스크립트로 변환되는 JSX 사투리에 대해 멱등 원입니다. 따라서 'jsx!'를 쓰지 않아도됩니다. 모든 단일 종속성 앞에 JSX가 기본값 인로 설정되어 있어야합니다.

RequireJS에서 가능합니까?

+0

대신 jsx 명령 줄 도구를 사용하여 모듈을 프리 컴파일하십시오 (필자는 require.js를 모르지만 가장 간단한 해결책으로 보입니다). – FakeRainBrigand

+1

저는이 문제에 대해 잠시 동안 일했고 어디에서나 RequireJS 'dev-time tooling의 이점을 누리고있는 동안 쉬운 방법을 찾을 수 없었습니다. 우리는 webpack 기반 빌드 시스템으로의 전환을 고려하고 있습니다. –

답변

1

grunt + browserify + reactify를 사용하여 모든 React 파일을 쉽게 컴파일 할 수 있습니다. 여기에 그것을 할 기본적인 불평 소리의 설정은 다음과 같습니다

module.exports = function(grunt) { 'use strict'; 

    // Project configuration. 
    grunt.initConfig({ 
    pkg: grunt.file.readJSON('package.json'), 
    // Task configuration goes here. 
    paths: {}, 
    browserify: { 
     options: { 
     transform: ['reactify'], 
     }, 
     dev: { 
     src: '<%= paths.src_js %>/app/app.jsx', 
     dest: '<%= paths.build_js %>/app.js', 
     options: { debug: true } 
     }, 
     prod: { 
     src: '<%= browserify.dev.src %>', 
     dest: '<%= paths.build_js %>/app.min.js', 
     options: { debug: false }, 
     } 
    }, 
    watch: { 
     options: { livereload: true }, 
     browserify: { 
     files: ['<%= paths.src_js %>/app/**/*'], 
     tasks: ['browserify:dev'], 
     } 
    } 
    }); 

    grunt.loadNpmTasks('grunt-contrib-watch'); 
    grunt.loadNpmTasks('grunt-browserify'); 

    grunt.registerTask('dev', ['browserify:dev']); 
    grunt.registerTask('prod', ['browserify:prod']); 
}; 

당신은 grunt dev 또는 grunt prod하여 실행합니다.

+0

이것은 우리가 결국 사용하는 솔루션입니다 - 프로덕션 빌드를 위해. 일상적인 개발 작업을 위해 이렇게하는 것은 다소 다루기가 힘듭니다. 시계 작업이 실행되고 있지 않으면 프론트 엔드가 업데이트되지 않습니다. 경우에 따라 watch + compile이 다소 느리고 페이지를 다시로드 할 때 컴파일이 완료되지 않습니다. –

+0

저는 그것을 개발과 생산 모두에 사용하고 있습니다. livereload 플러그인으로 빌드가 완료되면 바로 잡기 시계가 약 1.5 초 걸리며 브라우저 자동로드가 필요합니다. 몇 가지 문제를 짚어서 꿀꿀 거리는 시계를 빠르게 만들고 필요한 파일 만 컴파일하도록 여러 개의 고립 된 시계 작업을하는 것이 트릭입니다. – daniula

관련 문제