0

我正在使用 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 应该可以解决它（并且它适用于我拥有的另一个项目）

4

2 回答 2

0

默认情况下，browserify 不会转译项目之外的包含文件。由于导致该问题的组件是从 中包含的node_modules，因此我必须配置它的package.json文件以确保 browserify 知道它的源代码没有被转译，并且在包含它时它必须转译它。

我可以通过将其包含在我node_modules的组件中来做到这一点package.json：

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

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

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

于 2017-10-31T06:31:10.937 回答
0

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

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

于 2017-10-24T08:38:34.160 回答