Question

我有问题用gulp编译反应jsx代码。这是我docker-compose logs -f -t >> myDockerCompose.log的样子 -

gulpfile.js

在我的包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']);
});

当我输入es2015代码时，它确实会转换。但是jsx代码没有改变。

我正在尝试编译以下代码 -

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

但它只符合es6代码而不符合jsx

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


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

我也尝试过使用webpack，发现'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); });正在运行，但babel-preset-react却没有。在以前我使用另一个gulp工具编译，但这次我想使用gulp-babel但似乎它没有按预期工作。

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

Answer 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

使用babel-preset的Gulp babel反应不会改变JSX代码

1 个答案: