尽管使用了 babel-preset-react、babel-preset-es2015 和 babel-preset-stage-3,browserify 仍无法解析 jsx
browserify fails to parse jsx despite using babel-preset-react, babel-preset-es2015 and babel-preset-stage-3
我正在使用 grunt 来自动化整个过程。这是我的配置:
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-standalone 抛出错误的同一个文件,它工作得很好。
我对如何解决这个问题感到困惑,因为大多数链接都说使用 babel-preset-react 应该可以解决这个问题(并且它适用于我的另一个项目)
试试 babel-preset-env,这应该涵盖大多数情况。
我个人倾向于使用类似的东西:
"presets": ["env", "react", "stage-3"]
如果这不起作用,那一定是您的配置有其他问题
默认情况下,browserify 不会转译项目之外的包含文件。由于导致问题的组件是从 node_modules
中包含的,我必须配置它的 package.json
文件以确保 browserify 知道它的源是 而不是 转译的并且它必须在包含它时对其进行转换。
我能够通过将其包含在我的 node_modules
组件的 package.json
:
中来做到这一点
"browserify": { "transform": [ "babelify" ] }
一旦我添加了这个并确保组件从模块中导出,一切都开始按预期工作。
参考:https://github.com/babel/babel/issues/1625#issuecomment-105334250
我正在使用 grunt 来自动化整个过程。这是我的配置:
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-standalone 抛出错误的同一个文件,它工作得很好。
我对如何解决这个问题感到困惑,因为大多数链接都说使用 babel-preset-react 应该可以解决这个问题(并且它适用于我的另一个项目)
试试 babel-preset-env,这应该涵盖大多数情况。
我个人倾向于使用类似的东西:
"presets": ["env", "react", "stage-3"]
如果这不起作用,那一定是您的配置有其他问题
默认情况下,browserify 不会转译项目之外的包含文件。由于导致问题的组件是从 node_modules
中包含的,我必须配置它的 package.json
文件以确保 browserify 知道它的源是 而不是 转译的并且它必须在包含它时对其进行转换。
我能够通过将其包含在我的 node_modules
组件的 package.json
:
"browserify": { "transform": [ "babelify" ] }
一旦我添加了这个并确保组件从模块中导出,一切都开始按预期工作。
参考:https://github.com/babel/babel/issues/1625#issuecomment-105334250