react-create-app “npm run build” 不转译 JSX答案

【问题标题】：react-create-app "npm run build" not transpiling JSXreact-create-app “npm run build” 不转译 JSX
【发布时间】：2018-06-03 21:29:26
【问题描述】：

我使用 create-react-app 创建了一个新的 React 项目，但是当我使用 npm run build 并在浏览器中打开生成的构建（由我自己的 express 应用程序提供）时，我收到有关无法识别的 JSX 语法的控制台错误'未转译。

它应该自动开箱即用，还是我需要做其他事情？

编辑：项目结构

express-application:
  admin (react build output)
  admin-src (create-react-app project source folder)
  ...
  app.js
  project.json
  gulpfile.js

所以我使用 gulp 脚本在 admin-src 子目录中执行 npm run build，然后将生成的构建输出到 admin。 admin 文件夹是应用程序用作客户端的文件夹。

【问题讨论】：

您在浏览器中打开的文件是什么？
@facundo 我有自动构建脚本来将生成的输出文件夹部署到为该文件夹提供服务的快速应用程序中。因此，构建中的 index.html 就是被提供的内容。
发布您的文件夹结构
@facundo 已编辑帖子，我只是给出了相关细节
贴出错误有助于更好地理解。

标签： javascript reactjs npm-scripts

【解决方案1】：

好的，我使用gulp 和gulp-jsx 在将生成的构建文件夹复制出来之前对其进行了转换。

这是我想出的：

const gulp = require('gulp');
const jsx = require('gulp-jsx');

gulp.task('build-admin', () => {
  gulp.src('admin-src/build/**/*!(.js)')
    .pipe(gulp.dest('./admin'));
  gulp.src('admin-src/build/**/*.js')
    .pipe(jsx({
      factory: 'React.createClass'
    }))
    .pipe(gulp.dest('./admin'));
});

【讨论】：