javascript - import 语句 react 失败

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-从这里下载 react 过渡: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

在火狐浏览器上:

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

知道我错过了什么吗？

谢谢

Answer 1

要使用 import，你不应该使用 babel polyfill，而应该使用 babel 转译代码。因此，强烈建议在您的 React 项目中使用带有 babel 插件的 webpack。

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