Question

我正在使用grunt来自动完成整个过程。这就是我的配置：

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

尝试解析导入的响应组件之一时出现以下错误：

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

Aborted due to warnings.

我尝试在浏览器中使用与babel-standalone一起抛出错误的同一文件，它运行正常。

我很难解决这个问题，因为大多数链接都说使用babel-preset-react应该修复它（并且它适用于我拥有的另一个项目）

Answer 1

尝试babel-preset-env，这应该涵盖大多数情况。我个人倾向于使用类似的东西： "presets": ["env", "react", "stage-3"]

如果这不起作用，那么您的配置必须是其他内容

Answer 2

默认情况下，browserify不会转换项目之外的包含文件。由于导致问题的组件包含在node_modules中，因此我必须配置其package.json文件以确保browserify知道其来源不已编译并且已知当它被包括在内时必须将其转化。

我能够通过在node_modules组件中package.json {<1}}中包含此内容来实现这一点：

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

一旦我添加了这个并确保从模块导出组件，一切都按预期开始工作。

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

尽管使用了babel-preset-react，babel-preset-es2015和babel-preset-stage-3，browserify无法解析jsx

2 个答案: