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

Question

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

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

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

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

Answer 1

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。