Question

我正在尝试从HTML页面调用一个简单的JSX代码。但是，当我尝试使用命令“ browserify -t [babelify --presets [react]] src / App.js -o build.js”使用Babel编译JSX代码时，会引发错误：

'插件/预设文件不允许导出对象，只能导出功能。解析文件时，在F：\ Work Backup \ simplereact \ react-tutorial \ node_modules \ babel-preset-react \ lib \ index.js中：F：\ Work Backup \ simplereact \ react-tutorial \ src \ App.js'

请帮助！ index.html

<!DOCTYPE html>
<html>
  <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel- core/5.8.23      /browser.js"></script>
</head>
<body>
<div id="app"></div>
<script src="src/app.js" type="text/babel"></script>
</body>
</html>

App.js

import React from 'react';

var App = React.createClass({
render: function() {
return <div>Something something Dark Side</div>;
}
});

ReactDOM.render(
<App />,
document.getElementById('app')
);
export default App;

Package.json

{  
"name": "react-tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "^7.4.4",
"babel-preset-react": "^6.24.1",
"babelify": "^10.0.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
  ],
  "development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
  ]
  }
  }

Answer 1

如果没有使用ES6，则根据reactjs.org

var createReactClass = require('create-react-class'); //create function like so.
var App = createReactClass({                     
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

插件/预设文件不允许仅导出对象功能

1 个答案: