Question

我在这里遵循了这个答案：

https://stackoverflow.com/a/50066512/11420374

但是在编译我的浏览器（Firefox 67）后说：

SyntaxError：导入声明只能出现在模块的顶层

我的app.jsx看起来像：

import React from 'react';
import ReactDOM from 'react-dom';

class Alpha extends React.Component {render() { return <h1>Hello</h1>; }}
ReactDOM.render(<Alpha />, document.getElementById('root'));

.babelrc：

{
  "presets": ["@babel/preset-react"]
}

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="root"></div>
    <script src="js/dashboard.js"></script>
  </body>

</html>

使用babel-cli编译

那是为什么？他们说，较新的浏览器支持es6导入。

尝试：

... type="module"></script>

结果：

TypeError：解决模块说明符时出错：反应

Answer 1

这是没有webpack的最小React设置：

const {render} = ReactDOM
const {createElement: h} = React

function GreatSuccess(props) {
  return h('h1', null, 'Hello ', props.framework)
}

render(h(GreatSuccess, {framework: 'React'}),
  document.getElementById('root'))

<script src="//cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>

这与您的代码有所不同：

您正在使用非标准的JSX。改用React.createElement()
您的代码假设使用Node.js模块解析规则。 import './path/to/react.js' ^{* 1}或更好的方法是，只需通过<script>标签加载React

* 1 ：由于错误#14635

，我上次检查此方法不起作用

Answer 2

我不喜欢<script type="module">解决方案。我建议您选择一种替代方法。

尝试parcel捆绑器。这是一个零配置 CLI工具。

首先，在全局安装

npm install -g parcel-bundler

您需要做的就是修改index.html以直接引用源代码路径，例如：

...
    <script src="src/app.jsx"></script>
  </body>
</html>

然后输入终端

parcel index.html

你很好！

没有Webpack的最小React设置

2 个答案: