Question

我试图将带有ES6的React引入我的应用程序，该应用程序是使用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
}))

然后，修复您的import语句。由于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']

Answer 2

尝试

import Child from './child';

非法进口申报与gulp-react

2 个答案: