JSXコードを変換しないbabel-preset-reactのGulp babel

Question

gulpと反応するjsxコードをコンパイルする際に問題があります。私はそれが変換んes2015コードを置くとき

"devDependencies": { 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-react": "^6.16.0", 
    "gulp": "^3.9.1", 
    "gulp-babel": "^6.1.2" 
    }, 
    "dependencies": { 
    "react": "^15.4.0", 
    "react-dom": "^15.4.0" 
    } 

私のパッケージJSONファイルに

const gulp = require('gulp'); 
const babel = require('gulp-babel'); 

gulp.task('js',() => { 
    return gulp.src('src/main.js') 
     .pipe(babel({ 
      presets: ['es2015', 'react'] 
     })) 
     .pipe(gulp.dest('build')); 
}); 

gulp.task('default', ['js'],() => { 
    gulp.watch('src/main.js', ['js']); 
}); 

- ここに私の gulpfile.jsのように見えるものです。しかし、jsxコードは変換されません。

私は次のコードをコンパイルしようとしています

- 私もWebPACKので試してみましたbabel-preset-reactが動作しますが、それgulp-babelとされていることが分かった

import Hello from './hello.jsx'; 
import World from './world.jsx'; 


[1,2,3].map(n => console.log(n + 1)); 

を、それが唯一のES6コードを遵守

'use strict'; 

var _hello = require('./hello.jsx'); 

var _hello2 = _interopRequireDefault(_hello); 

var _world = require('./world.jsx'); 

var _world2 = _interopRequireDefault(_world); 

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 

[1, 2, 3].map(function (n) { 
    return console.log(n + 1); 
}); 

をJSXありませんそうではありません。前に私はコンパイルするために別のツールを使用していましたが、今回はgulp-babelを使用したいと思いますが、期待通りに動作していないようです。

どのようなヘルプも高く評価されます。

Answer 1

@sven @hectorに感謝します。

私はそれを私の伝統的な方法で動作させ、ブラウジングしてバベルを付けました。ここでは、それは

const gulp = require('gulp'); 
const browserify = require('browserify'); 
const babelify = require('babelify'); 
const source = require('vinyl-source-stream'); 

gulp.task('js',() => { 
    return browserify({ entries: ['src/main.js'] }) 
     .transform(babelify, {presets: ["react", "es2015"]}) // "es2015", "react" 
     .bundle() 
     .pipe(source('main.js')) 
     .pipe(gulp.dest('build')); 
}); 

ように見えるか、あなたは問題を抱えているならば、あなたはtranspileに `babel`を言っているだけのファイルは、SRC /メイン`である