web-dev-qa-db-ja.com

GulpとBabelで.jsxを.jsに変換する方法は？

すべての/src/.jsxファイルを/src/.jsに変換する必要があります

私がgulp-reactを使用する前に：

var react = require('gulp-react');

gulp.task('jsx', function () {
  return gulp.src('src/jsx/*.jsx')
   .pipe(react())
   .pipe(gulp.dest('src/js/'));
});

それは動作しますが、いくつかの小さな間違いがないわけではありません。 BabelのWebサイト（ https://babeljs.io/repl/ ）を使用すると、すべて正しく変換されます。私たちを手伝ってくれますか。 .JSXファイルを変換するようにgulpを設定するにはどうすればよいですか？

reactjsgulpbabeljs
18
user5460152

まず、次の2つのパッケージをインストールする必要があります。

npm install gulp-babel babel-plugin-transform-react-jsx

その後、次のように変換できます：

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

gulp.task("babel", function(){
    return gulp.src("src/jsx/*.jsx").
        pipe(babel({
            plugins: ['transform-react-jsx']
        })).
        pipe(gulp.dest("src/js/"));
});
34
Navid Farahzadi

変換時にdisplayNameが自動的に挿入されるようにするには、gulp-babelと Reactプリセット をインストールする必要があります。

npm install --save-dev gulp-babel babel-preset-react

そしてgulpfile.jsで：

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

gulp.task("jsx", function(){
    return gulp.src("src/jsx/*.jsx")
        .pipe(babel({
            presets: ["react"]
        }))
        .pipe(gulp.dest("src/js"));
});
6
itacode
gulp.task('build', ['copy'], function() {
    gulp.src([
            'src/**/*.jsx',
            'src/**/*.js',
            '!./node_modules/**'
        ])
        .pipe(babel({
            presets: ['es2015', 'react']
        }))
        .pipe(gulp.dest('app'));
});

eS6も使用しているためです。

2
Jan Franz Palngipang

最新のReact v16.8.xBabel 7を使用するには、@babel/preset-envおよび@babel/preset-reactモジュールを使用します。

npm i -D @babel/preset-env @babel/preset-react

次にgulpfile.jsで：

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

gulp.task("whatever_task_name_you_prefer", function(){
    return gulp.src("src/jsx/*.jsx")
        .pipe(babel({
            presets: ["@babel/preset-env", @babel/preset-react"]
        }))
        .pipe(gulp.dest("dist"));
});
1
Waleed93

うん、gulp-babelパッケージでgulpを使うとうまくいきます。
https://github.com/babel/gulp-babel

0
Robbie