Question

我正在学习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

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

由于

Answer 1

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

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

Answer 2

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

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

谢谢

反应中导入语句失败

2 个答案: