Gulp Babel mit Babel-Preset-reagieren nicht transformieren JSX-Code

Ich habe ein Problem zu kompilieren reagieren Jsx-Code mit Schluck. Hier ist, was meine gulpfile.js aussieht -Gulp Babel mit Babel-Preset-reagieren nicht transformieren JSX-Code

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

in meinem Paket JSON-Datei

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

wenn ich es2015 Code setzen sie verändern sich. Aber der jsx-Code transformiert nicht.

Ich versuche folgenden Code zu kompilieren -

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


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

aber es entspricht nur es6 Codes JSX nicht

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

ich auch mit webpack ausprobiert und fand heraus, dass babel-preset-react arbeitet aber mit gulp-babel es ist nicht. Früher habe ich ein anderes Schluckwerkzeug benutzt, um es zu kompilieren, aber dieses Mal möchte ich gulp-babel benutzen, aber es scheint nicht so zu funktionieren wie erwartet.

Jede Art von Hilfe wird sehr geschätzt.

Quelle

2016-11-21 HADI

Die einzige Datei, die Sie sagen, 'babel' transpile ist' src/main .js', also genau das tut es. –

Es wandelt den es6-Code entsprechend der Voreinstellung um, aber warum ändert er nicht den reactJS-jsx-Code. Fehle ich etwas? – HADI

Ich denke, was er meint, ist, dass Ihr Setup importierte Dateien, die zu transpilieren sind, nicht verarbeitet, nur die Eintragsdatei ('main.js'). Versuchen Sie, JSX direkt in 'main.js' hinzuzufügen, und Sie sollten es als transpiliert sehen. Ich habe das Gefühl, dass Sie dachten, Schluck würde die erforderlichen/importierten Dateien auf die gleiche Weise vom Einstiegspunkt laden wie das Webpack. –

Dank @sven @hector, um mich zu zeigen.

Ich habe es mit meiner traditionellen Methode arbeiten browserify und babelify. Hier ist, wie es

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

zu sehen ist oder wenn Sie mit Problem dann webpack verwenden oder für schluck Fan Verwendung schluck-webpack

Quelle

2016-11-22 05:38:52 HADI

Gulp Babel mit Babel-Preset-reagieren nicht transformieren JSX-Code

Antwort

Verwandte Themen