코드베이스가 JSX Transformer를 사용하여 점차 React 프레임 워크쪽으로 이동합니다.RequireJS - 플러그인을 기본 로더로 만들기
JSX 변압기는 일반적인 자바 스크립트 파일 및 자바 스크립트로 변환되는 JSX 사투리에 대해 멱등 원입니다. 따라서 'jsx!'를 쓰지 않아도됩니다. 모든 단일 종속성 앞에 JSX가 기본값 인로 설정되어 있어야합니다.
RequireJS에서 가능합니까?
코드베이스가 JSX Transformer를 사용하여 점차 React 프레임 워크쪽으로 이동합니다.RequireJS - 플러그인을 기본 로더로 만들기
JSX 변압기는 일반적인 자바 스크립트 파일 및 자바 스크립트로 변환되는 JSX 사투리에 대해 멱등 원입니다. 따라서 'jsx!'를 쓰지 않아도됩니다. 모든 단일 종속성 앞에 JSX가 기본값 인로 설정되어 있어야합니다.
RequireJS에서 가능합니까?
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
하여 실행합니다.
이것은 우리가 결국 사용하는 솔루션입니다 - 프로덕션 빌드를 위해. 일상적인 개발 작업을 위해 이렇게하는 것은 다소 다루기가 힘듭니다. 시계 작업이 실행되고 있지 않으면 프론트 엔드가 업데이트되지 않습니다. 경우에 따라 watch + compile이 다소 느리고 페이지를 다시로드 할 때 컴파일이 완료되지 않습니다. –
저는 그것을 개발과 생산 모두에 사용하고 있습니다. livereload 플러그인으로 빌드가 완료되면 바로 잡기 시계가 약 1.5 초 걸리며 브라우저 자동로드가 필요합니다. 몇 가지 문제를 짚어서 꿀꿀 거리는 시계를 빠르게 만들고 필요한 파일 만 컴파일하도록 여러 개의 고립 된 시계 작업을하는 것이 트릭입니다. – daniula
대신 jsx 명령 줄 도구를 사용하여 모듈을 프리 컴파일하십시오 (필자는 require.js를 모르지만 가장 간단한 해결책으로 보입니다). – FakeRainBrigand
저는이 문제에 대해 잠시 동안 일했고 어디에서나 RequireJS 'dev-time tooling의 이점을 누리고있는 동안 쉬운 방법을 찾을 수 없었습니다. 우리는 webpack 기반 빌드 시스템으로의 전환을 고려하고 있습니다. –