Gulp babel 与 babel-preset-react 不转换 JSX 代码答案

【问题标题】：Gulp babel with babel-preset-react not transforming JSX codeGulp babel 与 babel-preset-react 不转换 JSX 代码
【发布时间】：2016-11-21 13:27:49
【问题描述】：

我在使用 gulp 编译 react jsx 代码时遇到问题。这是我的gulpfile.js 的样子 -

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 但似乎它没有按预期工作。

我们非常感谢任何形式的帮助。

【问题讨论】：

您告诉babel 转换的唯一文件是src/main.js，所以它就是这样做的。
它正在根据定义的预设转换 es6 代码，但为什么它没有转换 reactJS jsx 代码。我错过了什么吗？
我认为他的意思是您的设置不会处理要转译的导入文件，只处理条目 (main.js) 文件。尝试直接在main.js 中添加一些 JSX，您应该会看到它被转译。我有一种感觉，你认为 gulp 会像 webpack 一样神奇地从入口点加载所需/导入的文件。
@hector 是的，这正是我的想法。我认为它会自动从导入语句中导入文件，就像在 browserify 中一样。所以现在我想知道如何才能做到这一点。
browserify 怎么样 :) 但是说真的，您需要传入所有要转译的文件。最明显的是将gulp中的源设置为某个目录中与*.jsx匹配的所有文件。

标签： reactjs gulp babeljs gulp-babel

【解决方案1】：

感谢@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 或 gulp 粉丝使用 gulp-webpack

【讨论】：