如何使用Gulp和Babel将.jsx转换为.js？

guicsvcw 于 7个月前发布在 Babel

关注(0)|答案(5)|浏览(78)

我需要将所有/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网站（https://babeljs.io/repl/）所有转换的权利。你能帮助我。我如何设置gulp转换.JSX文件？

babeljs

来源：https://stackoverflow.com/questions/33243895/how-convert-jsx-to-js-with-gulp-and-babel

5条答案

按热度按时间

vojdkbi01#

首先，你需要安装这两个包：

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/"));
});

型

赞(0）回复(0）举报 7个月前

zxlwwiss2#

为了在转换时自动插入DisplayName，需要安装gulp-babel和React preset：

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

型

赞(0）回复(0）举报 7个月前

r8xiu3jd3#

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

字符串
因为我也用ES6。

赞(0）回复(0）举报 7个月前

smtd7mpg4#

使用Babel 7的最新React v16.8.x，使用@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"));
});

型

赞(0）回复(0）举报 7个月前

gstyhher5#

是的，使用gulp与包gulp-babel会做的伎俩。
https://github.com/babel/gulp-babel

赞(0）回复(0）举报 7个月前