尽管使用了babel-预设-react、babel-预设-es2015和babel-预设阶段-3，但browserify无法解析jsx。

Question

我正在使用咕噜自动整个过程。这就是我的配置：

browserify: {
        dist: {
            files: {
                '<%= dirs.dest %>/index.js': [
                    '<%= dirs.src %>/index.js'
                ]
            },
            options: {
                transform: [
                    ['babelify', { presets: ['es2015', 'stage-3', 'react'] }]
                ]
            },
        }
    },

当试图解析使用以下错误导入的一个react组件时，它将失败：

>>             <div>
>>             ^
>> ParseError: Unexpected token
Warning: Error running grunt-browserify. Use --force to continue.

Aborted due to warnings.

我尝试使用在浏览器中抛出babel独立错误的同一个文件，它运行得很好。

我很困惑如何解决这个问题，因为大多数链接都说使用babel-预设-react应该修复它(而且它可以与我的另一个项目一起工作)。

Answer 1

默认情况下，browserify不包含在项目之外的transpile包含的文件。由于导致这个问题的组件是从node_modules中包含的，所以我必须配置它的package.json文件，以确保browserify知道它的源是而不是，并且当它被包含时，它必须转换它。

我能够通过在我的node_modules组件的package.json中包含这一点来做到这一点

"browserify": { "transform": [ "babelify" ] }

一旦我添加了这一点，并确保组件从模块中导出，一切就开始按照预期的方式工作。

参考资料：https://github.com/babel/babel/issues/1625#issuecomment-105334250

Answer 2

试试babel-预设-env，这应该涵盖大多数情况。就我个人而言，我倾向于使用这样的东西："presets": ["env", "react", "stage-3"]

如果这不起作用，你的配置必须是其他的东西。