非法进口报关与吞咽反应

Question

我试图在我的应用程序中引入使用ES6的反作用，该应用程序是用Gulp构建的。我可以让React单独工作，而ES6单独工作。但是试图import破坏了我的Gulp构建。Gulp的错误是：

第14行:非法进口申报

我的HTML页面包括React和构建的JS文件：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.min.js"></script>
    <script src="js/app.js"></script>

app.js看起来是这样的：

import {Child} from './child.js';

var Parent = React.createClass({
  render: function(){
    const y = 3;  //es6 works
    return (
      <div>
        <div> This is the parent {y}. </div>
        <Child name="child"/>
      </div>
    )
  }
});

React.render(<Parent />, document.getElementById('container'));

child.js位于同一个目录中，如下所示：

var Child = React.createClass({
  render: function(){
    return (
      <div>
        and this is the <b>{this.props.name}</b>.
      </div>
    )
  }
});

export default Child;

我的Gulp文件中用Babel编译ES6的部分：

gulp.task('babel', function(){
  gulp.src('js/app.js')
    .pipe(react())
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('dist/js'));
});

我错过了什么/做错了什么阻止我使用import

Answer 1

您必须将es6module选项应用于gulp-react，以便允许导入模块：

.pipe(react({
  es6module: true
}))

然后，修复导入语句。由于Child是以默认方式导出的，所以按如下方式导入：

import Child from './child.js';

注意：gulp-react是反对gulp-babel的，所以如果您已经将它用于es2015，我建议使用它。相反，使用gulp-babel，并为Babel安装react预置：

npm install --save-dev babel-preset-react

最后，将其应用于gulp-babel

presets: ['es2015', 'react']