如何在 gulp 中正确包含 requirejs 和 react & JSX

Question

我正在编写一个使用 generator-webapp 生成的项目。此包生成一个基于 gulp 的项目。

我选择使用 react 包括 JSX 文件（具有 .jsx 文件扩展名）来编写我的应用程序。此外，我更喜欢将 ES6 语法与 import ____ from '____' 语句一起使用。

我正在尝试编写一个 gulp 任务，它将处理带有 .jsx 扩展名的反应文件，如下所示：

gulp.task('react-scripts', () => {
    return gulp.src('app/scripts/**/*.jsx')

        // run some pipes with the files

        .pipe(gulp.dest('.tmp/scripts'))
        .pipe(reload({stream: true}));
});

这个管道应该处理 ES6 语法，并包括 react 和 requirejs 的插件（因为我使用的是 import 语句）。

我阅读了 gulp-requirejs 和 gulp-jsx 等软件包，但如您所见，它们已被列入黑名单 here。

有没有有效的方法来实现这个？谢谢！

Answer 1

我目前在我的 React 设置中使用 browserify/Babelify。

const browserify = require('browserify')
const source = require('vinyl-source-stream')
const buffer = require('vinyl-buffer')
const notify = require('gulp-notify')

gulp.task('js', () => {
  return browserify('src/js/main.js', { debug: true })
    .transform('babelify', {
      presets: ['react', 'es2015', 'stage-0']
    })
    .bundle().on('error', notify.onError((error) => {
      if (error) {
        console.log(error.stack)
        return 'error in JS'
      }
    }))
    .pipe(source('index.js'))
    .pipe(buffer())
    .pipe(gulp.dest(dir))
    .pipe(notify('Javascript Finished Compiling'))
})

我的 main.js 将包括我所有的导入和我的反应渲染。

如何在 gulp 中正确包含 requirejs 和 react & JSX

How to correctly include requirejs and react & JSX in gulp

javascript

jsx

requirejs

reactjs

gulp