反应中导入语句失败

时间:2017-04-15 15:31:11

标签: javascript reactjs

我正在学习React,我有一个像这样设置的php项目:

在index.php的头部我加载:

<script type="text/javascript" src="js/libs/react.js"></script>
<script type="text/javascript" src="js/libs/react-dom.js"></script>
<script type="text/javascript" src="js/libs/browser.min.js"></script>

在底部:

<script type="text/babel" src="jsx/index.jsx"></script>
<script> 
        window.onload=function(){ 
         site.init();
         }</script>
</script>

我没有做任何转换。在Apache + Firefox上一切运行良好。

然后我想添加一些过渡,比如单击按钮时淡入和淡出的图像,而不仅仅是切换。所以我:

1-下载反应从此处转换:https://github.com/reactjs/react-transition-group

2-将其src文件夹的内容添加到js,现在看起来像这样:

js/
../<some vanilla.js files>
../libs/
../libs/react.js
../libs/react-dom.js
../libs/browser.min.js
../libs/react-transition-group/
......./react-transition-group/index.js
......./react-transition-group/CSSTransitionGroup.js
......./react-transition-group/CSSTransitionGroup.js
......./react-transition-group/TransitionGroup.js

3-加载index.js像这样:

现在,在Chrome上,我在运行网站时收到此错误:

index.js:1 Uncaught SyntaxError: Unexpected token import

在Firefox上:

SyntaxError: import declarations may only appear at top level of a module  index.js:1

关于我错过了什么的任何想法?

由于

2 个答案:

答案 0 :(得分:1)

要使用import,你不应该使用babel polyfill,而是使用babel来转换代码。因此,我们强烈建议您使用babel插件在您的react项目中使用webpack。

此博客可能会帮助您进一步设置react / webpack / babel项目:https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel

答案 1 :(得分:0)

正如Andy Ray在这里所说http://blog.andrewray.me/webpack-when-to-use-and-why,看起来我正在以旧方式做事;轮子已被重新发明,我使用的php-webpacker-of -orts似乎开始落后了。

似乎我很幸运地使用了一组在导入<script src=library.js>时没有冲突的库,并且react-transition消除了这种错觉。在dejakob的建议之后,我已经在整个过程中进行了整合,至少在目前,事情似乎再次无缝地发挥作用。

谢谢