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

【问题标题】：How convert .jsx to .js with Gulp and Babel?如何使用 Gulp 和 Babel 将 .jsx 转换为 .js？
【发布时间】：2023-03-25 20:34:01
【问题描述】：

我需要将所有 /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 文件？

【问题讨论】：

Babel 网站上的文档似乎涵盖了这一点：babeljs.io/docs/setup/#gulp 并且已经有大量资源解释了如何使用 gulp-rename。
gulp.task('jsx', function () { return gulp.src('src/jsx/*.jsx') .pipe(babel()) .pipe(gulp.dest(' src/js/')); });
我不确定你想用那个评论说什么。是的，这将编译。然后你可以用gulp-rename重命名。

标签： reactjs gulp babeljs

【解决方案1】：

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

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

【讨论】：

谢谢，看来我还需要安装babel-core。
这是一个非常有用的答案。在很多情况下，某人只需要 JSX 转换而无需其他任何东西。
帽子导入 @babel/core 而不是 babel-core。见：github.com/babel/gulp-babel/issues/124#issuecomment-326853222
能否请您添加您的 package.json 文件也用于此转换。
babeljs.io/docs/en/babel-plugin-transform-react-jsx 最新版本对我有用

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

因为我也在使用 ES6。

【讨论】：

【解决方案4】：

对于使用 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"));
});

【讨论】：

别忘了引号——预设：["@babel/preset-env", "@babel/preset-react"]

【解决方案5】：

是的，使用 gulp 和 gulp-babel 包就可以了。
https://github.com/babel/gulp-babel

【讨论】：