没有 Webpack 的最小 React 设置答案

【问题标题】：Minimal React setup without Webpack没有 Webpack 的最小 React 设置
【发布时间】：2019-05-01 01:09:38
【问题描述】：

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

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

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

语法错误：导入声明只能出现在模块的顶层

我的 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：解析模块说明符时出错：react

【问题讨论】：

我的第一个想法是：stackoverflow.com/a/46415925/3000068。这能回答你的问题吗？
getting: TypeError: Error resolve module specifier: react
浏览器不像 node.js，不能解析路径名，.. 所以你可能需要做 import React from './react'; 代替，假设你的反应文件在同一个目录中，或者可能是 import React from '/lib/react' 等等。
跨域请求被阻止：同源策略不允许读取文件中的远程资源：...
您似乎在没有反馈的情况下被否决了。如果有帮助，我可以尝试理解并解释。我想他们期望的一件事是在任何其他信息之前直接提出问题。例如，问题的标题或第一行可以说“如何为场景 xyz 配置 React 构建？”或者，“如何修复 React 语法错误 xyz？”等。如果您不介意为此尝试编辑，我很乐意通过 +1 支持您的努力。感谢您的耐心等待。

标签： javascript reactjs

【解决方案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

【讨论】：

【解决方案2】：

我不喜欢<script type="module"> 解决方案。我会推荐一个替代方案。

试试parcel bundler。它是一个零配置 CLI 工具。

首先，全局安装

npm install -g parcel-bundler

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

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

然后在终端输入

parcel index.html

你可以走了！

【讨论】：

谢谢，我认为 parcel 是一种更简单的方法。