ES6 modules + Gulp

Question

es6 모듈로 작성된 번들 앱을 만들어야합니다. 예 :

import Api from 'api'; 

function Loader(){ 
    // some code that user api 
}; 

export default Loader; 

꿀꺽 - ES6-모듈 transpiler을 통해 AMD로 변환 된 버전을 개발하고 RequireJS와 함께 잘 작동합니다. 하지만이 번들을 구축 할 방법을 찾을 수 없습니다. 나는 꿀꺽 - ES6-모듈 transpiler을 사용 꿀꺽 - browserify하려고했습니다

gulp.task('build_js', function() { 
    gulp.src('app/**/*.jsx') 
    .pipe(gulp_react({errLogToConsole: true})) 
    .pipe(transpiler({ 
     type: 'cjs' 
    })) 
    .pipe(gulp.dest('./' + build_fld + '/')); 
}); 

gulp.task('brow', ['build_js'] function(){ 
    gulp.src('dist/auto-name.js') 
    .pipe(browserify()) 
    .pipe(gulp.dest('./' + build_fld + '/')); 
}); 

하지만 난 Browserify에서 오류가 있습니다

Error: module 'name' not found from 'd:\\Work\\lib.react-suggest\\dist\\fake_32525252.js'; 

을하지만 이해하기 때문에 일반적으로는 나쁜 방법은,이다 브라우저에서 비닐 스트림을 지원하지 않고 먼저 CommonJS 모듈을 사용하여 js 파일을 빌드 한 다음 Browserify 사용자가 필요합니다.

아마도 내가 뭔가 잘못 이해하고 있으며 스트림 하나에서 빌드 할 수 있습니까? 가능한 다른 솔루션은 무엇입니까? 결과적으로 AMD는 개발을 위해 AMD를, 생산을 위해서는 CommonJS 또는 Global을 원합니다. 내가 무엇을

앱 파일 stucture : 결과에서

/app 
    -app.jsx 
    -component1.jsx 
    -component2.jsx 
    -index.html 
/.tmp 
/dist 
gulpfile.js 

내가 원하는 : 나는 무엇을 알고부터

/app 
    -app.jsx 
    -component1.jsx 
    -component2.jsx 
    -index.html 
/.tmp 
    -app.js 
    -component1.js 
    -component2.js 
    -index.html 
/dist 
    -app.min.js 
gulpfile.js 

Answer 1

, Browserify는 현재 부가 기능/요구하는 방식으로 스트림을 받아 않습니다. 꿀꺽 꿀꺽 마심 전화가 진짜 시내를 일으키는 지 나는 확실하지 않다. 그러나 솔직히 결과를 생산하기 위해 브라우저 API를 직접 호출 할 수있을 때 왜 거기에 꿀꺽 꿀꺽 마시는 것이 좋을까요?

var b = browserify(); 
b.add('dist/auto-name.js'); 
b.bundle().pipe(gulp.dest('./' + build_fld + '/')); 

당연히 Gulp와 함께 다른 마법을 쓰지 않는 한 여기에 나와 있지 않습니다. 그럴 경우 행운을 빕니다 :)

Answer 2

gulp-es6-module-transpiler의 0.2.0 버전을 사용할 수 있습니다. bundle 및 commonjs 포맷터를 지원하므로 번들을 작성하는 것이 문제가되지 않습니다. AMD의 경우, es6-module-transpiler-amd-formatter 모듈을 사용할 수 있습니다.