主页 / coding / 问题 / 78051393
Accepted
Felix F Xu
Asked: 2024-02-24 14:14:45 +0800 CST

Web 浏览器在开发过程中如何运行“.jsx”文件？

  • 772

我是新来反应“.jsx”文件的，我现在可以运行dev并build测试。

我有一个关于浏览器如何运行“.js”文件的问题。如果项目是build，那么浏览器正在运行“.js”文件，我理解这是因为浏览器可以运行“.js”文件。

但是在期间dev，当我在浏览器的开发模式下检查应用程序源时，它显示在html文件中，有一个“.jsx”文件！

在此输入图像描述

那么怎么可能呢？浏览器可以运行“.jsx”文件吗？或者在开发模式下，开发服务器（如 npm 或 vite）正在做一些秘密的事情？浏览器将源代码显示为“.jsx”，但实际上它正在运行其他文件（被 npm 或 vite 隐藏）？

javascript

3 个回答

  1. Best Answer

    1. 开发过程中浏览器如何运行.jsx文件？：在开发过程中，当您使用npm或Vite等开发服务器时，服务器会执行一些幕后工作。当浏览器请求 .jsx 文件时，开发服务器会即时将 JSX 编译为 JavaScript，并将编译后的 JavaScript 发送到浏览器。因此，即使浏览器看起来正在运行 .jsx 文件，它也正在运行已编译的 JavaScript。

    2. 为什么浏览器源代码中显示.jsx？：这是由于源映射造成的。正如https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/use_a_source_map/index.html中所解释的，“源映射是一个从转换后的源映射到原始源的文件，使浏览器重建原始源并在调试器中呈现重建的原始源。” 在您的示例中，“原始源”是 JSX 代码，“转换后的源”是编译后的 JavaScript。

    • 5

  2. 浏览器不JSX直接运行，甚至不受浏览器支持。JSX 是HTML 中 JavaScript 的语法扩展，用于实现可读和可理解的代码。你甚至可以在你的 React 项目中编写纯 JS，它仍然会运行。

    JSX浏览器本身并不理解。相反，它需要使用Babel等工具转换为有效的 JavaScript 。此过程称为转译，它确保浏览器可以正确解释和运行 React 应用程序中嵌入的 JSX 代码。

    您可以看到，当您实际build应用程序时，您不会在 build/dist 文件夹中获得任何 JSX。它只是 JS 和 CSS。

    • 2

  3. JSX 不是原生 JavaScript。浏览器旨在解释和执行标准 JavaScript 代码。JSX 其类似于 HTML 的语法嵌入在 JavaScript 中，默认情况下浏览器无法理解。由于语法差异，JSX 使用看起来像 HTML 标签的元素，但它们实际上是创建 React 组件的 JavaScript 表达式。浏览器没有内置机制来解析和呈现这些自定义元素。

    • -1

相关问题