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

【问题标题】：How can I get gulp-bro to import files ending with .jsx?如何让 gulp-bro 导入以 .jsx 结尾的文件？
【发布时间】：2017-11-07 13:42:36
【问题描述】：

我正在尝试使用 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，如果可以避免的话。

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

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

【问题讨论】：

看起来扩展名必须包含“。”如“.js”、“.jsx”
啊。是的，就是这样，不敢相信我错过了......谢谢！随意添加它作为答案，我会接受;）

标签： reactjs gulp browserify jsx

【解决方案1】：

Gulp-bro 将其选项传递给 browserify。虽然 browserify 关于扩展选项的文档不是很好，但我确实看到了 How to specify browserify extensions in package.json? 和 Grunt-Browserify extensions flag not working 扩展选项必须包含“.”之类的地方

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

【讨论】：