Question

我试图将我的React代码库移动到ES2016，但无法通过最简单的示例，需要一些帮助！

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <wrapper></wrapper>

    <script src="js/lib/react-with-addons.min.js"></script>
    <script src="js/lib/react-dom.min.js"></script>
    <script src="js/bundle.js"></script>
</body>
</html>

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './app';

ReactDOM.render(
    <App/>,
    document.querySelector('wrapper')
);

app.js

import React from 'react';

export default class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <app>something goes there</app>
        )
    }
};

gulpfile.js

var gulp = require('gulp'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    gutil = require('gulp-util'),
    babelify = require('babelify');

gulp.task('jsx', function() {
    browserify({
        entries: './src/web/js/main.jsx',
        extensions: ['.jsx'],
        debug: true
    })
    .transform(babelify, {presets: ['es2015', 'react']})
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./dist/web/js/'))
});

gulp.task('default', ['jsx']);

和package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "?.git"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.0.1",
    "react-dom": "^15.0.1"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0",
    "gulp": "^3.9.1",
    "gulp-util": "^3.0.7",
    "reactify": "^1.1.1",
    "vinyl-source-stream": "^1.1.0"
  }
}

似乎它应该可以工作，但我不断收到以下两个错误

warning.js：44警告：React.createElement：type不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。

和

invariant.js：38 Uncaught Invariant Violation：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。

我知道它一定是愚蠢的简单，但是无法弄清楚。请帮忙。

Answer 1

更改此

import { App } from './app';

为：

import App from './app';

反应启动ES2016

1 个答案: