时间戳

首页 > 解决方案 > 插件/预设文件不允许仅导出对象功能

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

问题描述

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

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

请帮忙！索引.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>

应用程序.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;

包.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"
  ]
  }
  }

标签： htmlreactjsjsxbabeljsreact-dom

解决方案

根据 reactjs.org，如果您不使用 ES6。

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

推荐阅读