Início / coding / Perguntas / 78051393
Accepted
Felix F Xu
Asked: 2024-02-24 14:14:45 +0800 CST

Como o navegador da web executa o arquivo “.jsx” durante o desenvolvimento?

  • 772

Sou novo em reagir a arquivos ".jsx", agora posso executar deve buildtestar.

Tenho uma dúvida sobre como o navegador executa arquivos ".js". Se o projeto for build, então o navegador está executando o arquivo ".js", o que eu entendo porque o navegador pode executar o arquivo ".js".

mas durante dev, quando verifico a fonte do aplicativo no modo de desenvolvimento do navegador, ele mostra que no arquivo html existe um arquivo ".jsx"!

insira a descrição da imagem aqui

Então, como isso é possível? um navegador pode executar o arquivo ".jsx"? ou durante o modo dev, o servidor de desenvolvimento (como npm ou vite) está fazendo algo secreto? o navegador mostra o código-fonte como ".jsx", mas na verdade está executando outros arquivos (ocultos por npm ou vite)?

javascript

3 respostas

  1. Best Answer

    1. Como o navegador executa arquivos .jsx durante o desenvolvimento? : durante o desenvolvimento, quando você usa um servidor de desenvolvimento como npm ou Vite, o servidor faz algum trabalho nos bastidores. Quando o navegador solicita um arquivo .jsx, o servidor de desenvolvimento compila o JSX em JavaScript instantaneamente e envia esse JavaScript compilado para o navegador. Portanto, mesmo que o navegador pareça estar executando arquivos .jsx, ele está executando o JavaScript compilado.

    2. Por que o navegador mostra .jsx no código-fonte? : Isso se deve aos mapas de origem. Conforme explicado em https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/use_a_source_map/index.html , "Um mapa de origem é um arquivo que mapeia da fonte transformada para a fonte original, permitindo o navegador para reconstruir a fonte original e apresentar o original reconstruído no depurador." No seu exemplo, a "fonte original" é o código JSX e a "fonte transformada" é o JavaScript compilado.

    • 5

  2. Os navegadores não são executados JSXdiretamente e nem mesmo são suportados pelos navegadores. JSX é uma extensão de sintaxe usada para javascript dentro de HTML, para código legível e compreensível. Você pode até escrever JS puro dentro do seu projeto react e ele ainda será executado.

    JSXnão é compreendido nativamente pelos navegadores. Em vez disso, ele precisa ser convertido em JavaScript válido usando ferramentas como Babel . Esse processo é conhecido como transpilação , que garante que os navegadores possam interpretar e executar adequadamente o código JSX incorporado nos aplicativos React.

    Você pode ver que quando você realmente buildusa seu aplicativo, não obtém nenhum JSX na pasta build/dist. É apenas JS e CSS.

    • 2

  3. JSX não é JavaScript nativo. Os navegadores são construídos para interpretar e executar código JavaScript padrão. JSX, com sua sintaxe semelhante ao HTML incorporada ao JavaScript, não é algo que um navegador entenda por padrão. Devido a diferenças de sintaxe, JSX usa elementos que se parecem com tags HTML, mas na verdade são expressões JavaScript que criam componentes React. Os navegadores não possuem mecanismos integrados para analisar e renderizar esses elementos personalizados.

    • -1

relate perguntas