使用 gulp-react 进行非法进口申报

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
}))

然后，修正您的导入语句。因为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';