我正在学习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
关于我错过了什么的任何想法?
由于
答案 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的建议之后,我已经在整个过程中进行了整合,至少在目前,事情似乎再次无缝地发挥作用。
谢谢