1

我有两个 JSX 文件（index.js 和 app.jsx）和一个 HTML 文件，我想在 index.js 中导入 app.jsx，这是 index.html 的脚本文件。我想在没有 npm 的情况下直接运行 HTML (index.html)（仅使用 LiveServer）。我该怎么做？

代码：index.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <!-- We will put our React component inside this div. -->
    <div id="root"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>



    <!-- Load our React component. -->
    <!-- <script src="index.js" type="text/babel"></script> -->

  </body>
</html>

index.js

import App from './app'; // we are facing issue here!

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

应用程序.jsx

    var App = React.createClass({
    render: function() {
      return (
        <div className="app">
        Hello, world!
        </div>
      );
    }
});
  
export default App
4

1 回答 1

1

首先你需要使用更新版本的 Babel：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

然后你需要告诉它你正在处理一个模块：

<script src="index.js" type="text/babel" data-type="module"></script>

然后，您需要使用正确的模块路径。浏览器无法读取文件系统以匹配没有扩展名的名称；没有文件系统，只有 HTTP。

import App from './app.jsx';

...然后您需要配置您的服务器，以便它发送Content-Type: text/babelJSX 文件的标头。

我还没有弄清楚如何在 Live Server 中做到这一点。

JSX 的客户端转译很聪明，但一旦你超越了最琐碎的案例，最终的麻烦将超过它的价值。你说你想避免它，但 React 被设计为与运行在 Node.js 上的工具链一起使用。

使用 Node.js 和 Parcel 进行设置非常简单，我建议您改为使用这条路线。

于 2021-04-30T06:49:38.413 回答