加载 http://localhost:8080/test 时有没有办法渲染 TSX 文件？答案

【问题标题】：Is there a way to render a TSX file when loading http://localhost:8080/test?加载 http://localhost:8080/test 时有没有办法渲染 TSX 文件？
【发布时间】：2020-05-26 17:55:56
【问题描述】：

我真的是前端开发的新手。我目前正在参与一个做前端开发的项目。我希望我能解释清楚。

每当我调用http://localhost:8080/test 时，它都会被page1.jsp 加载。

现在我想加载 TSX 文件而不是 JSP。我尝试将web.xml 中的<welcome-file> 从page1.jsp 更改为html/js/page2.tsx，但我不知道为什么它不起作用。发生的事情是会弹出一个下载文件窗口而不是加载http://localhost:8080/test。我将 TSX 文件放在 html/js 目录中，因为这是 Typescript 和 React 的包所在的位置。顺便说一句，我说的 TSX 文件是一个使用 Typescript 的 React 组件。

是否可以配置 web.xml 来呈现 TSX 文件？如果没有，我还有其他方法可以加载吗？
如果我想加载 TSX 文件，web.xml 是否仍然重要？

【问题讨论】：

浏览器仅读取文件类型 html、css 和 js (JavaScript)。其他一切都需要“转译”。否则浏览器只会下载它，以便用户可以在读取该文件类型的程序中打开它:)

标签： reactjs typescript

【解决方案1】：

不，有几个原因：

.jsp 是“Java 服务器页面”。您可能正在运行像 Tomcat 这样的应用程序服务器（我已经有 15 年左右没有这样做了，所以请耐心等待）。它被编译成一个 Servlet，然后运行以生成您的页面作为输出。您的 .tsx 文件不适合该过程。
您的应用程序服务器可能有一个目录，您可以在其中放置不需要在服务器端运行的静态文件；看看你是否有一个“WebContent”目录左右。在里面可以放置纯HTML文件、Javascript文件、固定图片等。
但是如果你把你的 TSX 文件放在那里，你的浏览器仍然不能使用它：浏览器不理解 Typescript。 Typescript 需要编译成 Javascript，如果你把生成的 .js 文件放在那里，那么 HTML 文件就可以使用它（带有标签），这样就可以了。
李>
但是你的文件不仅仅是 Typescript，它还是一个 tsx——它可能还包含 JSX，它也需要被翻译成 Javascript。
还有一些依赖项，例如 React，您还需要在 HTML 中下载它们。
总的来说，这就是像 Webpack 这样的打包工具的用途（例如，如果您使用 create-react-app，那么您将从一开始就获得有效的 Webpack 配置）。它可以创建一个“bundle.js”，其中包含一个文件中所需的所有 Javascript，包括所有依赖项和编译为 Javascript 的所有 TSX 代码。

将 that 放在 WebContent 或类似目录中，从某个 HTML 文件中的标记调用 that ——希望您会在控制台中收到一条不错的错误消息这将引导您了解我忘记提及的第一件事:-)

【讨论】：