与巴贝尔预设反应不变化JSO代码

我有问题编译反应JSF代码与吞。这里是我的gulpfile.js是什么样子 -与巴贝尔预设反应不变化JSO代码

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']); 
});

在我的包JSON文件

"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" 
    }

当我把ES2015代码它变换。但是，jsx代码并没有改变。

我试图编译下面的代码 -

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


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

，但它符合仅ES6代码不JSX

'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); 
});

我也试过用的WebPack并发现babel-preset-react是工作，但与gulp-babel它不是。在以前我使用另一个gulp工具来编译，但这次我想使用gulp-babel，但似乎没有按预期工作。

任何形式的帮助，高度赞赏。

来源

2016-11-21 HADI

你告诉的唯一一个文件'babel'到transpile是'的src/main .js'，所以这正是它所做的。 –

它根据预先定义的转换es6代码，但它为什么不转换reactJS jsx代码。我错过了什么吗？ – HADI

我认为他的意思是你的设置不会处理导入的文件进行转发，只是条目（'main.js'）文件。尝试直接在'main.js'中添加一些JSX，你应该看到它被转发。我有这种感觉，你认为gulp会奇迹般地以webpack的方式从入口点加载所需的/导入的文件。 –

感谢@sven @hector指出我。

我得到它与我的传统方法browserify和babelify工作。下面是它看起来像

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')); 
});

，或者如果您有问题，然后使用的WebPack或一饮而尽风扇的使用一饮而尽-的WebPack

来源

2016-11-22 05:38:52 HADI

与巴贝尔预设反应不变化JSO代码

回答

相关问题