非法进口声明吞噬反应

我正在尝试将React与ES6引入到我的应用程序中，该应用程序使用Gulp构建。我可以让React单独工作，而ES6独自工作。但试图import崩溃我的Gulp构建。咕嘟咕嘟的错误是：非法进口声明吞噬反应

第14行：非法进口报关

我的HTML页面包括反应，并内置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在同一个目录中，看起来像th是：

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

export default Child;

我咕嘟咕嘟文件，编译器ES6与巴贝尔的部分：

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

我缺少/做错了是阻止我使用import？

来源

2017-06-18 Alan P.

你必须在es6module选项适用于gulp-react允许导入模块的：

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

然后，解决您的import语句。由于Child导出为默认，导入这样的：

import Child from './child.js';

注：gulp-react是赞成不赞成gulp-babel，所以我建议您使用，而不是如果你已经在使用它es2015。使用gulp-babel，而不是和安装巴贝尔react预设：

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

最后，它适用于gulp-babel：

presets: ['es2015', 'react']

来源

2017-06-18 21:00:21 Li357

谢谢安德鲁。我认为这很有效，但是在做完这个之后，我又遇到了一个错误。在浏览器中，我得到了一个来自require'Module name xxx还没有加载上下文'的控制台错误。所以我放弃了Babel，并使用Webpack来编译React代码，现在看起来不错。 –

@AlanP。哦，是的。 Babel实际上并不是一个模块加载器，它只是一个转译器，因此会发生错误。使用Webpack还可以转换Web的模块，并且还有很长的路要走。 – Li357

-2

尝试

import Child from './child';

来源

2017-06-18 20:52:51

尽管此代码可以回答这个问题，提供了关于如何和/或为什么它解决了额外的上下文问题会改善答案的长期价值。 – Badacadabra

@Badacadabra我不介意点和声誉。我提供了工作代码，上面的用户回答了解释，因此没有必要给出和安德鲁一样的解释。 **如果他没有提供解释的答案，我会添加解释。 –

非法进口声明吞噬反应

回答

相关问题