type="text/babel" 的外部脚本不起作用

为什么 type="text/babel" 的外部脚本在 ReactJS 中不起作用?我将 index.html 和 foo.js 放在同一个文件夹中。使用 Google Chrome 打开 index.html 文件后没有显示


index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>ReactJS</title>
        <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script type="text/babel" src="foo.js"></script>
    </head>
    <body>

        <div id="root"></div>

    </body>
</html>

foo.js

ReactDOM.render(
  <h1>Hello World</h1>,
  document.getElementById('root')
);
stack overflow External script for type="text/babel" not working
原文答案

答案:

作者头像

只需在 babel 之前包含 main 文件。它将按预期工作。

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" src="./main.js"></script>
作者头像

您需要运行本地服务器。

例如 https://www.npmjs.com/package/http-server

npm -g install http-server
cd <path to app>
http-server

然后在 http://0.0.0.0:8080 上查看您的页面

这里还有使用 python 或 php 运行本地服务器的说明 https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server