如何让 gulp-bro 导入以 .jsx 结尾的文件？

Question

我正在尝试使用 gulp 和 gulp-bro 转译 jsx，我快到了，除非它无法导入组件，除非我将 .jsx 添加到导入的末尾.像这样：

import Viewer from './components/viewer/Viewer';

失败 Error: Cannot find module './components/viewer/Viewer'

同时：

import Viewer from './components/viewer/Viewer.jsx';

工作正常！

当然，导入树比这更复杂，所以如果可以避免，我宁愿避免将所有内容重命名为 .js 或明确指定 .jsx。

这是我的 gulp 文件的相关部分。它忽略了扩展设置。

gulp.task('viewer', function () {
  gulp.src('./app/js/app.jsx')
    .pipe(bro({
        transform: [
          babelify.configure({
            presets: ['env', 'react'],
          })
        ],
        extensions: ['js', 'jsx'],
        debug: true,
    }))
    .pipe(rename('app.js'))
    .pipe(gulp.dest(paths.js))
});

Answer 1

Gulp-bro passes its options to browserify. While browserify's documentation on the extension's option is not great, I did see How to specify browserify extensions in package.json? and Grunt-Browserify extensions flag not working 其中扩展选项必须包含“.”，例如

extensions: ['.js', '.jsx'],

如何让 gulp-bro 导入以 .jsx 结尾的文件？

How can I get gulp-bro to import files ending with .jsx?

jsx

browserify

reactjs

gulp