Question

我是同形Javascript的新手，所以请耐心等待。我正在使用Gulp与Babelify一起使用预设es2015，stage0，并在快速服务器上做出反应。

我的组件，script.js：

var React = require('react');
var ReactDOM = require('react-dom');

export class Son extends React.Component {
  render () {
    return (
      <div>
        <h3>Bleh</h3>
        <p>
          Paragraph 1
        </p>
      </div>
    );
  }
}

if(typeof window !== 'undefined') {
  ReactDOM.render(
    <Son />,
    document.getElementById('s1')
  );
}

我的路线，index.js：

let React = require('react');
let ReactDOMServer = require('react-dom/server');

let express = require('express');
let router = express.Router();

import Son from '../public/javascripts/script';
// let Son = require('../public/javascripts/script').default;
console.log(Son);

/* GET home page. */
router.get('/', function(req, res, next) {
  let testString = ReactDOMServer.renderToString(<Son />);

  res.render('index', {
    title: 'Express',
    react: testString
  });
});

module.exports = router;

Gulp和nodemon都正在进行转换/编译。 Son的console.log输出正在生成一个空对象：{}。这里的问题是模块的导出/导入;当我将类声明复制并粘贴到routes模块时，输出更改为[Function: Son]，应用程序按预期运行。我已经阅读了有关如何处理模块导入的其他帖子，并尝试了所有解决方案（包括module.exports =和require(...).default的常规es5语法），但没有一个有效。无论如何，如果我能用es6正确地指出这个概念，那就太好了。

Answer 1

您正在导出名为Son的命名导出，而不是将其设为默认导出。

您可以更改导出：

export default class Son extends React.Component {

或者更改您的导入：

import { Son } from '../public/javascripts/script';

你可能想要前者。

Answer 2

好的，这就是问题所在：Browserify正在弄乱一切并阻止导出/导入。我必须首先将我的组件转换为中间版本的es5版本，我可以在另一个模块中使用它并与前端的browserify捆绑在一起。

.babelrc文件：

{ "presets": ["es2015", "stage-0", "react"] }

gulpfile.js：

var gulp = require('gulp');
var babel = require("gulp-babel");
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var watch = require('gulp-watch');
var uglify = require('gulp-uglify');

watch(['./source/*.js'], function() {
  console.log("App has been modified; re-compiling.");
  gulp.start('default');
});

// bundles front end after react code transpiles.
gulp.task('frontEnd', ['reactStuff'], function() {
  console.log('frontend compiling.');
  return browserify('./experimental/script.js')
        .bundle()
        .pipe(source('app.js'))
        .pipe(gulp.dest('./public/javascripts/'));
});

// transpiles react component from jsx and es6 to es5.
gulp.task('reactStuff', function() {
  console.log('react compiling.');
  return gulp.src('./source/script.js')
      .pipe(babel())
      .pipe(gulp.dest('./experimental/'));
});

// transpiles routes rendering react components on the server to es5.
gulp.task('routerStuff', function() {
  console.log('routes compiling.');
  return gulp.src('./source/index.js')
      .pipe(babel())
      .pipe(gulp.dest('./routes/'));
});

// default task, loops in all other tasks.
gulp.task('default', ['reactStuff', 'routerStuff', 'frontEnd'], function () {
  console.log('done.');
});

元素类型无效：期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：object

2 个答案: